I had a task of creating a background video. I have only done this by using the actual < video > tag and displaying the MP4 file video.
This is not that difficult of a task because you have much control over the display of the video.
That was just too simple though. I then got a task to allow people to upload a youtube video for a background. This is not my idea of a fun task. Why? Because YouTube takes a lot of effort in making sure that their users experience is always the same. The problem comes with responsive design. If you want the video to be 100% height and 100% width, you can’t really control that. The iframe wants to control its content on its own.
I have yet to find an actual solution for this situation. The best I could get is the code below. It works well for what it is but I would really like to find something better in the future.
I got this information from Amit Agarwal’s post here

  1. <div style=position: fixed; zindex: 99; width: 100%; height: 100%>
  2. <iframe frameborder=“0” height=“100%” width=“100%”
  3. src=“https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1”>
  4. </iframe>
  5. </div>
  7. // Replace ID with the actual ID of your YouTube video