WPservice DEVELOPMENT STUDIO PRESENTS
LONG-TERM GROWTH
We always design our websites with your future success in mind, carefully planning and optimizing all content to ensure maximum visibility and long-term profitability

How to Set Video as Background

Why use video as background on your website?

There are several benefits to using video as website background. Your website will have plenty of competition for visitors and using video backgrounds may give you just the edge you need. What benefits does using a video background have? Benefits include:

  • Video backgrounds generate interest and can induce visitors to stay on your site longer.
  • Video backgrounds are hard to miss. Unlike regular embedded videos or text content which may be overlooked, motion backgrounds are there as soon as a visitor opens a page
  • Video backgrounds increase interaction with visitors

Evaluate your particular needs and see if a background video makes sense for your website.

Setting video as background on your website

video as background

Using video for background on websites has become more common since HTML5 made it much easier. You can now use video background for website pages to attract visitors and initiate some interaction between them and your website. Displaying video on background website pages can be done by creating an HTML5 element and using some simple CSS code as shown in the following steps:

  • To begin with we need to create a simple HTML5 video element with loop, auto play and muted attributes and place it inside a container element. The image used in poster attribute will be replaced by the first frame of the video when it loads. Because of this it is a good practice to use the first frame of a video for a poster image.
<div class="fullscreen‐bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen‐bg__video">
<source src="video/big_girl_shoes.webm" type="video/webm">
<source src="video/big_girl_shoes.mp4" type="video/mp4">
<source src="video/big_girl_shoes.ogv" type="video/ogg">
</video>
</div>
 .fullscreen‐bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z‐index: ‐100;
}

.fullscreen‐bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
  • What we have done is to give our video element the width and height of the viewport (our browser window). In most cases our video element aspect ratio will be different than our video source aspect ratio which is a bit of a problem. For the purpose of explanation consider our video source aspect ratio to be 16:9. Due to the difference in aspect ratios we would be left with a white space on the top and the bottom of our screen. This is something that can be fixed fairly easily. By stretching our video viewport so that it will be larger than our browser viewport we can get rid of any white spaces on the videos. We will adjust it to be taller or wider depending on the browser viewports aspect ratio. To achieve this adjustment we will be using media queries:
@media (min‐aspect‐ratio: 16/9) {
.fullscreen‐bg__video {
width: 100%;
height: auto;
}
}
@media (max‐aspect‐ratio: 16/9) {
.fullscreen‐bg__video {
width: auto;
height: 100%;
}
}
  • After adjusting the white spaces will be taken care of but we will be left with another small problem. That is that the video doesn’t center itself when the window is resized. An easy way to handle that is by stretching the video to be taller and wider than our screen. We can then use the negative margins to center the video.
@media (min‐aspect‐ratio: 16/9) {
.fullscreen‐bg__video {
height: 300%;
top: ‐100%;
}
}
@media (max‐aspect‐ratio: 16/9) {
.fullscreen‐bg__video {
width: 300%;
left: ‐100%;
}
}
  • That is all there is to it. We now will have a full screen video background for our website. As a final step we will hide the video on mobile and only display the background image. The reason for this is that most mobile platforms wont auto play HTML5 video. For this example the same image that is used for poster attribute in the video will be used:
@media (max‐width: 767px) {
.fullscreen‐bg {
background: url('../img/videoframe.jpg') center center / cover no‐repeat;
}
.fullscreen‐bg__video {
display: none;
}
}

Keep in mind that using “display: none” on the video element won’t prevent it from downloading.

Comments are closed.