Vimeo custom play/pause & mute/unmute buttons

index.html

<!-- 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>

script.js

// 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();
  });

scripts

<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>

style.scss

.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.markdown

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.