24 February

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.
Slicejack.com Article
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.

  • 1. Copy the HTML code 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>
  • 2. Paste the HTML code into your HTML file.

    • 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.

  • 3. Copy the CSS code below.
    • .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;
}
}
  • 4. Paste your CSS code into your CSS file.

    • 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.

  • 5. Create your frame in a fashion like this:
    • <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!

  • 6. Add frame styling to your CSS file.
    • .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!