我正在尝试创建一些网站模板来帮助我提高我的前端开发技能,因为我目前在后端工作方面要好得多.

我试图在某种程度上复制我自己网站的风格(https://thomas-smyth.co.uk/),这是一个简单的Bootstrap模板.但是,我不想在标题中使用静态照片,而是将其替换为Youtube视频.我开始减少我的网站中使用的模板,并将其剥离到我认为我可以得到它而不打破标题.

我在这个地方找到了一些代码来展示如何将Youtube视频设置为整个页面的背景,而不是页面特定部分的背景.我怎样才能做到这一点？注意 - 它必须从YouTube流式传输,因为我的主机不允许我在其服务器上托管视频.

我目前的代码:

    
    
    
    

    

    
    
    
    
    
    

    
    





    

        

            

                
This is going once vid is done.
            
        
    

    

        

            

                

                    
Placeholder!
                    
I should have found a witty comment to put here, but I'm just gonna put "Placeholder" instead.
                
            
        
    



    

我使用直接链接到视频流(仅限JS/CSS解决方案)创建了一个简单的Youtube视频背景示例.随意在JSfiddle上查看它.此外,您还可以将公共Google Image代理网址更新为任何公共或您自己的CORS代理.

var vid = "R3AKlscrjmQ",
    streams,
    video_focused = true,
    video_tag = $("#video"),
    video_obj = video_tag.get(0);
$.get("https://images"+~~(Math.random()*33)+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget_video_info%3Fvideo_id%3D" + vid, function(data) {
    if (data) {
        streams = parse_youtube_meta(data);
        video_tag.attr({
            src: streams['1080p'] || streams['720p'] || streams['360p']
        });

        document.addEventListener("visibilitychange", function() {
            video_focused = !video_focused ? video_obj.play() : video_obj.pause();
        });
    } else {
    		$('pre').text('Youtube API Error');
    }
});

function parse_youtube_meta(rawdata) {
    var data = parse_str(rawdata),
        streams = (data.url_encoded_fmt_stream_map + ',' + data.adaptive_fmts).split(','),
        result = {};
    $.each(streams, function(n, s) {
        var stream = parse_str(s),
            itag = stream.itag * 1,
            quality = false,
            itag_map = {
                18: '360p',
                22: '720p',
                37: '1080p',
                38: '3072p',
                82: '360p3d',
                83: '480p3d',
                84: '720p3d',
                85: '1080p3d',
                133: '240pna',
                134: '360pna',
                135: '480pna',
                136: '720pna',
                137: '1080pna',
                264: '1440pna',
                298: '720p60',
                299: '1080p60na',
                160: '144pna',
                139: "48kbps",
                140: "128kbps",
                141: "256kbps"
            };
        //if (stream.type.indexOf('o/mp4') > 0) console.log(stream);
        if (itag_map[itag]) result[itag_map[itag]] = stream.url;
    });
    return result;
};

function parse_str(str) {
    return str.split('&').reduce(function(params, param) {
        var paramSplit = param.split('=').map(function(value) {
            return decodeURIComponent(value.replace('+', ' '));
        });
        params[paramSplit[0]] = paramSplit[1];
        return params;
    }, {});
}

html, body {
	height: 100%;
	min-height: 100%;
	background: #444;
	overflow: hidden;
}
video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}