Skip to content

Instantly share code, notes, and snippets.

@bSampson0
Created Apr 20, 2020
Embed
What would you like to do?
Vimeo custom play/pause & mute/unmute buttons
<!-- to hide regular Vimeo controls, make sure to add a parameter '&background=1' in iframe's src property -->
<section class="title-wrapper">
<span>Responsive Vimeo Embedding & Custom Buttons</span>
</section>
<section class="banner-container">
<img class="bkgd-image-style" src="http://joekang.co/assets/image-hosting/053116_US_AmericanaVI_banner_w.png">
<div id="vi-video-1-container" class="video-wrapper">
<div class='embed-container'>
<!-- Vimeo iframe -->
<iframe id="vi-banner-video" src='https://player.vimeo.com/video/151536610?loop=1&title=0&byline=0&portrait=0&background=1' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<!-- video control : play/pause -->
<a class="video-control js-video-control paused" href="#" ></a>
<!-- audio control : mute/unmute -->
<a class="audio-control js-audio-control unmuted" href="#"></a>
</div>
</section>
// Use an external Vimeo API jquery plugin to play/pause/mute/unmute and etc
// Here's the link : https://github.com/jrue/Vimeo-jQuery-API
$(document).ready(function(){
// initial setup
// - video autoplay on/off
// - audio muted/unmuted
var isVideoAutoplay = true;
var isAuidoMuted = true;
if ( isVideoAutoplay === true ){
$('#vi-video-1-container').attr('data-video-is-playing', true);
$('#vi-banner-video').vimeo('play');
$(".video-control.js-video-control").removeClass('paused').addClass('playing');
}
else{
$('#vi-video-1-container').attr('data-video-is-playing', false);
$('#vi-banner-video').vimeo('pause');
$('.video-control.js-video-control.paused').addClass("video-control-show");
}
if ( isAuidoMuted === true ){
$('#vi-video-1-container').attr('data-audio-volume', 0);
$("#vi-banner-video").vimeo("setVolume", 0);
$(".audio-control.js-audio-control").removeClass('unmuted').addClass('muted');
}
else{
$('#vi-video-1-container').attr('data-audio-volume', 1);
$("#vi-banner-video").vimeo("setVolume", 1);
}
});
function playVideo() {
// var videoId = el.data('video');
// var video = document.getElementById(videoId);
videoStatus = $("#vi-video-1-container").attr('data-video-is-playing');
if (videoStatus == 'true') {
// Pause the video
console.log('trigger to false');
$('#vi-banner-video').vimeo('pause');
$(".video-control.js-video-control").removeClass('playing').addClass('paused');
$('#vi-video-1-container').attr('data-video-is-playing', false);
$('.video-control.js-video-control.paused').addClass("video-control-show");
}
else if (videoStatus == 'false'){
// Play the video
console.log('trigger to true');
$('#vi-banner-video').vimeo('play');
$(".video-control.js-video-control").removeClass('paused').addClass('playing');
$('#vi-video-1-container').attr('data-video-is-playing', true);
$('.video-control.js-video-control').css('opacity', '');
$('.video-control.js-video-control.playing').removeClass("video-control-show");
}
}
function muteAudio() {
audioStatus = $("#vi-video-1-container").attr('data-audio-volume');
if (audioStatus == 0) {
// Mute the audio
$('#vi-video-1-container').attr('data-audio-volume', 1);
$("#vi-banner-video").vimeo("setVolume", 1);
$(".audio-control.js-audio-control").removeClass('muted').addClass('unmuted');
}
else if (audioStatus == 1){
// Play the audio
$('#vi-video-1-container').attr('data-audio-volume', 0);
$("#vi-banner-video").vimeo("setVolume", 0);
$(".audio-control.js-audio-control").removeClass('unmuted').addClass('muted');
}
}
$(document).on('click', '.js-video-control', function(e) {
playVideo($(this));
e.preventDefault();
});
$(document).on('click', '.js-audio-control', function(e) {
muteAudio($(this));
e.preventDefault();
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://joekang.co/assets/cdn/jquery.vimeo.api.js"></script>
.banner-container {
width: 100%;
max-width: 1200px;
position: relative;
margin: 0 auto;
}
.bkgd-image-style {
position: relative;
width: 100%;
}
.video-wrapper {
width: 49.6%;
position: absolute;
top: 0px;
height: auto;
}
a.play-pause-button {
width: 50px;
height: 50px;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
iframe, object, embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
&:hover + .video-control {
opacity: 0.5;
}
iframe #player .controls-wrapper {
display: none;
}
}
/* video button style */
.video-control {
opacity: 0;
position: absolute;
width: 22.5%;
height: 40%;
top: 31%;
left: 38%;
transition: opacity 0.3s;
&:hover {
opacity: 1;
}
&:before, &:after {
content: '';
width: 100%;
height: 100%;
max-width: 131px;
background-repeat: no-repeat;
background-size: 100%;
display: block;
position: absolute;
}
&:before {
background-image: url("http://joekang.co/assets/image-hosting/video-buttons-black.png");
background-position: 53% 98%;
background-size: 332%;
/*content: "\ea1c";*/
}
&:after {
background-image: url("http://joekang.co/assets/image-hosting/video-buttons-black.png");
background-position: -292px -292px;
background-size: 332%;
/*content: "\ea1d";*/
}
&.paused:after, &.playing:before {
opacity: 0;
}
}
.video-control-show {
opacity: 0.5;
}
/* audio button style */
.audio-control {
opacity: 1;
position: absolute;
width: 6%;
height: 9%;
bottom: 3%;
left: 2%;
transition: opacity 0.3s;
&:hover {
opacity: 1;
}
&:before, &:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
max-width: 36px;
background-repeat: no-repeat;
background-size: 100%;
display: block;
}
&:before {
background-image: url("http://joekang.co/assets/image-hosting/video-buttons-black.png");
background-position: -1% -2%;
background-size: 254%;
}
&:after {
background-image: url("http://joekang.co/assets/image-hosting/video-buttons-black.png");
background-position: 69% -1%;
background-size: 254%;
}
&.unmuted:after, &.muted:before {
opacity: 0;
}
}
/* default style */
body {
background: linear-gradient(to right, #8e44ad, #c0392b);
}
.title-wrapper {
text-align: center;
margin: 3% 0;
font-size: 2.5vw;
span {
color: #fff;
}
}

Vimeo custom play/pause & mute/unmute buttons

We have a solution to have custom buttons on vimeo video.

  • in order to hide basic Vimeo controls, make sure to add a parameter '&background=1' in iframe's src property
  • use the external vimeo API jQuery plugin to play/pause/mute/unmute and etc
  • here's the link : https://github.com/jrue/Vimeo-jQuery-API

A Pen by Joe on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment