How to place a video background in a frame responsively using HTML5 and CSS.
Let me start off by telling you that I had some help with this topic from a great article online. Slicejack.com showed me great way to implement HTML5 and CSS code to make a video background on my website. For my specific purposes though, I wanted to put this video inside of a container and keep all of the attributes.
What you will want to do first is open up the HTML file you are wanting to incorporate the video background onto. You will also want to open your CSS file for the styling. Next, follow the instructions listed below.
The div "fullscreen-background" will give the video it's frame. The video tag will allow the video to play. The video poster attribute will be the cover of the video, while the browser is loading the website. The video class "fullscreen-background-video" tells the video specifically what it needs to do (in the CSS). The source tags retrieve the video.
The class of "fullscreen-background" is just an extension of the video tag. It isn't necessary to add attributes to it, but if you want to play with it, it won't hurt. The width and height of "fullscreen-background-video" acts as the filler. It makes the video fit nicely into the frame you choose. The media tag for the class "fullscreen-background" is there to make sure the image background image shows up, and in the correct proportion, when the screen width is at 767px.
The only difference between this HTML and the code in the first step is the first div and the section tag. Include the 2 tags to the beginning of your HTML, like I have done, if you want a frame around your video. Once you've done that you can then go to step 6. Otherwise, you can enjoy your full screen video background!
Once you have all of the code you can play around with it as you wish.
I hope you all found this helpful. If you have any questions or concerns please let me know in the comments section. Remember to share and post to Facebook!