Youtube Video Background

by Vladimir Sobolev

HTML

<video loop muted autoplay playsinline id="video"></video>

SCSS

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

JavaScript

var vid = "FUUw3zNTXH8",
    streams,
    video_tag = document.getElementById("video");

fetch("https://images" + ~~(Math.random() * 33) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" + encodeURIComponent("https://www.youtube.com/watch?hl=en&v=" + vid)).then(response => response.text()).then(function(data) {
    if (data) {
        streams = parse_youtube_meta(data);
        video_tag.src = streams['hls'] || streams['720pna'] || streams['480pna'] || streams['720p'] || streams['480p'] || streams['360p'] || streams['240p'];
    } else {
        alert('Youtube API Error');
    }
});

function parse_youtube_meta(rawdata) {

    var regex = /(?:ytplayer\.config\s*=\s*|ytInitialPlayerResponse\s?=\s?)(.+?)(?:;var|;\(function|\)?;\s*if|;\s*if|;\s*ytplayer\.|;\s*<\/script)/gmsu;

    rawdata = rawdata.split('window.getPageData')[0];
    rawdata = rawdata.replace('ytInitialPlayerResponse = null', '');
    rawdata = rawdata.replace('ytInitialPlayerResponse=window.ytInitialPlayerResponse', '');
    rawdata = rawdata.replace('ytplayer.config={args:{raw_player_response:ytInitialPlayerResponse}};', '');


    var matches = regex.exec(rawdata);
    var data = matches && matches.length > 1 ? JSON.parse(matches[1]) : false;

    console.log(data);

    var streams = [],
        result = {};

    if (data.streamingData) {
	
		if (data.streamingData.adaptiveFormats) {
			streams = streams.concat(data.streamingData.adaptiveFormats);
		}

		if (data.streamingData.formats) {
			streams = streams.concat(data.streamingData.formats);
		}
		
		if (data.streamingData.hlsManifestUrl) {
        	result.hls = data.streamingData.hlsManifestUrl;
    	}
	}

    streams.forEach(function(stream, n) {
        var itag = stream.itag * 1,
            quality = false,
            itag_map = {
                18: '360p',
                22: '720p',
                37: '1080p',
                38: '3072p',
                82: '360p3d',
                83: '480p3d',
        ...