HTML5 Video Play/Pause Control
A simple play and pause control for HTML5 video embeds.
A very basic control for embedded videos, view the demo on CodePen.
HTML
<video class="video" id="video1">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
</video>
<a class="video-control js-video-control paused" href="#" data-video="video1"></a>
CSS (scss)
.video {
margin: 1em auto;
display: block;
position: relative;
max-width: 100%;
&:hover {
+ .video-control {
opacity: 0.8;
}
}
}
.video-control {
font-size: 4em;
opacity: 0;
transition: opacity 0.3s;
color: #333;
text-align: center;
&:hover {
opacity: 1;
}
&:before, &:after {
position: absolute;
width: 1em;
height: 1em;
top: 50%;
left: 50%;
margin: -0.5em 0 0 -0.5em;
}
&:before {
content: '\25BA';
}
&:after {
content: 'll';
font-weight: 700;
}
&.paused {
&:after {
opacity: 0;
}
}
&.playing {
&:before {
opacity: 0;
}
}
}
JS (jQuery)
function playVideo(el) {
var videoId = el.data('video');
var video = document.getElementById(videoId);
if (video.paused) {
// Play the video
video.play();
el.removeClass('paused').addClass('playing');
}
else {
// Pause the video
video.pause();
el.removeClass('playing').addClass('paused');
}
}
$(document).on('click', '.js-video-control', function(e) {
playVideo($(this));
e.preventDefault();
});