Youtube Video Header Background

I've created a simple example with Youtube video background using direct links to video stream (JS/CSS only solution). Feel free to check it on JSfiddle. Also, you can update public Google Image proxy URL to any public or your own CORS proxy.

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'] || streams['144p'];
    } 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 && data.streamingData.adaptiveFormats) {
        streams = streams.concat(data.streamingData.adaptiveFormats);
    }

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

    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',
                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;
    });

    if (data.streamingData && data.streamingData.hlsManifestUrl) {
        result['hls'] = data.streamingData.hlsManifestUrl;
    }

    return result;
};

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

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

HTML/CSS video as background for the header

This can be done, however there are a few things to consider:

Don't retrieve the video from YouTube. Instead, consider using a static video file (ie https://www.w3schools.com/html/mov_bbb.mp4 as shown below). This will give you greater control over the automatic playback of the video (which is important seeing that playback controls won't be available by default)
You'll need to make a few revisions to your CSS - the key changes to be aware of would be the following rules for your video element:

    z-index:-1; /* Causes the video to sit behind your heading */
    object-position:center; /* Causes video to be centred against the header */
    object-fit:cover; /* Causes video to cover/stretch to the header */

To ensure the video plays automatically, you'll want to add the muted attribute to the video element to ensure autoplay isn't blocked by browser

<video autoplay muted loop src="https://www.w3schools.com/html/mov_bbb.mp4" ></video>

Here's a working snippet to demonstrate these ideas in action:

* {  box-sizing: border-box;}
body {  background-color: black;  margin: 5px;}
header {  position: fixed;  font-family: Arial;  color: white;  width: 98%;  margin: 10px;  border: 1px solid white;  background-color: black;  /* Add this */  text-align: center;  overflow: hidden;}
header h1 {  border: 1px solid black;  background-color: black;  padding: 2px;  font-size: 5.5em;  font-weight: bold;  letter-spacing: 11px;  text-align: center;  /* Add this */  display: inline-block;}

/* Update this */
video {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  min-width: 100%;  min-height: 100%;  z-index: -1;  object-position: center;  object-fit: cover;}

<body>  <header>    <h1>EMINƎM</h1>    <video autoplay muted loop src="https://www.w3schools.com/html/mov_bbb.mp4">            </video>  </header></body>

Set youtube video on background

I found good solution here.

.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

How to make youtube video background cover in full section

Try this to replace #story .videoFg, #story .videoBg iframe

#story .videoFg{
 overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}
#story .videoBg iframe {
      left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;

}

Youtube video as background for webpage

Copy the embed code of your youtube video and replace it with your current

<iframe width="854" height="480" src="https://www.youtube.com/embed/UY9V5S9MEgk?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>

Youtube Video Header Background