youtube-video-fullscreen-background

https://www.jqueryscript.net/other/youtube-video-fullscreen-background.html

1. To use the plugin, include the JavaScript jquery.youtube-background.js after the latest jQuery library (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="jquery.youtube-background.js"></script>

2. Embed a Youtube video into the document by insert the video URL in the data-youtube attribute:

<div id="ytbg" data-youtube="https://www.youtube.com/watch?v=IFSp2-CmQvk"></div>

3.Call the function to make the Youtube video fullscreen and act as a background. That’s it.

$(function(){
  $('[data-youtube]').youtube_background();
});

4 Override the default video settings (loop, mute, autoplay, show/hide controls, etc).

ytp = new YT.Player($elem[0], {
  height: '1080',
  width: '1920',
  videoId: ytid,
  playerVars: {
    'controls': 0,
    'autoplay': 1,
    'mute': 1,
    'loop': 1,
    'rel': 0,
    'showinfo': 0,
    'modestbranding': 1
  },
  events: {
    'onReady': onVideoPlayerReady,
    'onStateChange': onVideoStateChange
  }
});