How to add play/pause and mute/unmute buttons to the background video?


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.

 

 

 


Last update:
2015-11-10 18:07
Author:
Vlad Sargu
Revision:
1.2
Average rating:0 (0 Votes)