1. Open your HTML file and search for video-bg-wrapper class and add these lines of HTML after the <video> tag, like shown in the screenshot.
<div class="bg-video-controls"> <span class="js-play-bg-video bg-play-video is-playing"></span> <span class="js-mute-bg-video bg-mute-video is-muted"></span> </div>
2. Add somewhere in your CSS file, these lines of code:
.bg-video-controls{ position: absolute; left: 50%; bottom: 40px; z-index: 999; font-size: 20px; margin-left: -29px; } .bg-play-video, .bg-mute-video{ font-family: 'simple-line-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: white; cursor: pointer; display: inline-block; vertical-align: top; zoom: 1; *display: inline; } .bg-play-video.is-playing:after{ content: "\e072"; margin-right: 15px; } .bg-play-video:after{ content: "\e071"; margin-right: 15px; font-size: 18px; } .bg-mute-video.is-muted:after{ content: "\e0a1"; } .bg-mute-video:after{ content: "\e0a0"; }
3. Add somewhere in your JavaScript file these lines of code:
var video = $('.js-video-bg').get(0); $('.js-play-bg-video').click(function(event) { event.preventDefault(); if($(this).hasClass('is-playing')){ video.pause(); $(this).removeClass('is-playing'); }else{ video.play(); $(this).addClass('is-playing'); } }); $('.js-mute-bg-video').click(function(event) { event.preventDefault(); if($(this).hasClass('is-muted')){ $(video).prop('muted', false);; $(this).removeClass('is-muted'); }else{ $(video).prop('muted', true);; $(this).addClass('is-muted'); } });
4. At the bottom of the video should appear two buttons that will pause/play - mute/unmute the video.