Adding photos as background and make them responsive & fullscreen is quite easy but what to do with the video? You may be thinking it’s hard to do but it’s not.
By the help of little Javascript, We can easily make a Responsive Fullscreen Video Background and make it work with most of the major browsers.
The video background scaled with a 16/9 aspect ratio. You can easily implement on any kind of CMS website. To make it work with CMS, Simply pass the data attributes into video wrapper.
Also, It allows adding content including all the HTML element over the video. You can also add a link by editing the js file. In the demo, We have added a link just top right side of the video to watch video on youtube.
This version of the fullscreen video only supports one Youtube video at a time. To see how it work, You can refer to demo and download the source to start implementation.
It’s work well with almost all the mobile devices but on some devices, you may experience some issue. This is because of some of the mobile devices do not permit background video which controls through JS.
How to Make Mobile Friendly Fullscreen Video Background
You can quickly add a mobile-friendly video background by adding a style.css and index.js.
<link rel="stylesheet" href="css/style.css"> <script src="js/index.js"></script>
We have created simple markup with different options which allows you to customize it as per your need.
First, we have a video-wrapper with a different attribute which helps you to customize the video without going to edit Javascript file.
- data-video-id
- data-video-youtube
- data-video-start
- data-video-end
- data-video-width-add
- data-video-height-add
The inner container div with class name video-overlay allows you to add an overlay background.
<div class="video-wrapper" data-video-id="ORuz_i59Dfs" data-video-youtube-link="y" data-video-start="75" data-video-end="140" data-video-width-add="100" data-video-height-add="100" style="height: 800px;">
<div class="video-overlay" style="background-color: #000; opacity: .70"></div>
<div class="tv">
<div class="screen mute" id="tv"></div>
</div>
</div>Add Content
To add content including all basic HTML tags, you need to define a div with class name cover and place code just above the video HTML code.
<div class="cover">CONTNET HERE</div>
Changing Link
To change the link and text over the video, You need to edit the index.js
// Prepend expander if data attr is yes
if (videoYouTubeLink === 'y') {
$(".video-wrapper").prepend('<a href="https://www.youtube.com/watch?v=ORuz_i59Dfs" class="video-expand" target="_blank">Add Your Link on Video</a>');
}