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.
<div class="fullscreen-background"> <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-background-video"> <source src="video/big_buck_bunny.webm" type="video/webm"> <source src="video/big_buck_bunny.mp4" type="video/mp4"> <source src="video/big_buck_bunny.ogv" type="video/ogg"> </video> </div>
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.
.fullscreen-background { } .fullscreen-background-video { width: 100%; height: 100%; margin-bottom: -7px; } @media (max-width: 767px) { .fullscreen-background { background: url('img/videoframe.jpg') center center / cover no-repeat; } }
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.
<div class="border"> <section class="banner-blog"> <div class="fullscreen-bg"> <video loop muted autoplay poster="http://dev2.slicejack.com/fullscreen-video-demo/img/videoframe.jpg" class="fullscreen-bg__video"> <source src="../videos/waves.mp4" type="video/mp4"> <source src="http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.ogv" type="video/ogg"> <source src="http://dev2.slicejack.com/fullscreen-video-demo/video/big_buck_bunny.webm" type="video/webm"> </video> </div> </section> </div>
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!
.border { border-left:10px solid #222222; border-right:10px solid #222222; border-bottom:12px solid #3E3E3E; border-top:12px solid #3E3E3E; } .banner-blog { width:100%; text-align:center; color:white; font-size:150%; } @media only screen and (max-width: 464px) { .border { border-left:10px solid #222222; border-right:10px solid #222222; border-bottom:12px solid #3E3E3E; border-top:12px solid #3E3E3E; } }
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!