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
- <div style=“position: fixed; z–index: –99; width: 100%; height: 100%“>
- <iframe frameborder=“0” height=“100%” width=“100%”
- // Replace ID with the actual ID of your YouTube video