Creating a responsive HTML5 full width background video
It’s a great asset to include an area in your site design that plays a looping, audio-less video that encapsulates the messages you are portraying. It also gives a great focal on page load.
Adding a fullscreen background video is actually really simple, and quick to hook into your project, all you need is some CSS and a video link (I’ve used a file hosted elsewhere which helps with page load, but you can host the video on your site if you wanted).
In order to back the background video, the basic idea is to create a container, where the video will sit in and fill out the whole space of this container. I will also position another container over the video with an opacity on it so I can add in a title, copy and a call to action.
Getting it to work
So, starting with the HTML used to build the blocks, we have a full container that everything is contained within class=”video” then the following elements that create the overlay, copy and video.
The overlay container class=”video-opacity” doesn’t have anything in it, it is just used to display, and position a div that stretches over the full content area with a background colour with an opacity on it.
The next div holds the h1 and call to action and again is position on top of the overlay layer above.
The video is loaded in with the HTML5 <video> tag with a few attributes autoplay and loop which are self-explanatory for the video when it loads, there is also an attribute for poster this is for when the video tag won;t loop the video (iphone etc.) and the poster image is the holding image that will load instead.
I’ve also added additional CSS, this is there as when the page loads when the <video> isn’t supported, a small play button will appear but we don’t want this, so by adding the styles to the media-controls this lets me remove them.
As can be seen I’ve added 2 mixins in for the rounded corners of the button and the subtle animation on hover.
The video was taken from Vimeo from Everett Bowes