Mobile Friendly Website

CSSPLAY

Doing it with style

TUTORIALHiding Vimeo controls and replacing with play/pause toggle button

Date : 23rd February 2015

For all the latest browsers, Android and iOS



The original Vimeo video with controls visible
The same Vimeo video with controls hidden and Play/Pause toggle button added
The iPhone and iPad will see the default controls


Information

A method of hiding the standard Vimeo video controls at the bottom of the video and replacing with a single 'Play / Pause' button in the center of the video. This works in all the latest browsers and operating systems except for the iPhone and iPad which has a problem with adding external 'Play / Pause' controls. The standard controls are hidden using CSS and the video is also made responsive using CSS. The 'Play / Pause' button is added using CSS and its action is controlled using jQuery and Froogaloop.

HTML Code

The iframe code from Vimeo is modifid to remove the width and height values as these are now responsive and controlled using CSS.
The source 'src' is appended with ?api=1&player_id=video and the id="video" is added.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<article class="parent">
  <div class="overlay">
    <iframe src="http://player.vimeo.com/video/119936528?api=1&player_id=video" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"></iframe>
    <div class="playpause start"></div>
  </div>
</article>

Cascading Style Sheet

The CSS controls the aspect ratio to make the video responsive, hiding the default controls and placing the new 'Play / Pause' button in the center of the video.
The majority of the stylesheet is for the iPhone and iPad to show the default control bas as these devices have problems with external controls on videos.

/* set up the outer percentage width */
.parent {
  width:90%; 
  margin:50px auto; 
  position:relative; 
  z-index:10; 
  }
/* set up the aspect ratio of the video */
.overlay {
  width:100%;
  height:0; 
  padding-bottom:56.25%; 
  overflow:hidden; 
  position:relative; 
  margin:0 auto;
  }
/* hide the default video controls */
.overlay iframe {
  width:100%; 
  height:180%; 
  position:absolute; 
  left:0; 
  top:-40%; 
  z-index:-1;
  }
/* Use CSS art to draw the 'Play / Pause' button */
.playpause {
  width:65px; 
  height:40px; 
  background: rgba(0,0,0,0.8); 
  border-radius:5px; 
  position:absolute; 
  left:0; 
  top:0; 
  right:0; 
  bottom:0; 
  margin:auto; 
  z-index:100; 
  opacity:1; 
  cursor:pointer;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  }
.playpause:before {
  display:block; 
  content:""; 
  width:0; 
  height:0; 
  border-top:10px solid transparent; 
  border-bottom:10px solid transparent;
  border-left:20px solid #fff; 
  position:absolute; 
  left:23px; 
  top:10px;
  }
.playpause.pause {
  opacity:0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  }
.playpause.pause:before {
  display:block; 
  content:""; 
  width:6px; 
  height:20px; 
  border-left:6px solid #fff; 
  border-right:6px solid #fff; 
  border-width:0 6px;
  }
.playpause:hover {
  background-color:#00adef;
  }
.overlay:hover .playpause {
  opacity:1;
  }
@media only screen and (max-width:768px) { 
  .parent {
    width:90%; 
    margin:50px auto;
  }
}
/* fixes for the iPhone and iPad to show default controls */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
  .overlay iframe {
    height:100%; 
    top:0; 
    z-index:200;
  }
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  .overlay iframe {
    height:100%; 
    top:0; 
    z-index:200;
  }
}
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {
  .overlay iframe {
    height:100%; 
    top:0; 
    z-index:200;
  }
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
  .overlay iframe {
    height:100%;
    top:0;
    z-index:200;
  }
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  .overlay iframe {
    height:100%; 
    top:0; 
    z-index:200;
  }
}

Javascript - jQuery - Froogaloop

The script uses Vimeo Froogaloop for video control, see How to control the Vimeo embedded player with JavaScript, and jQuery to monitor the 'Play / Pause' button clicks.

$(window).load(function () {
  $(function() {
    var iframe = document.getElementById('video');
    var player = $f(iframe);
    player.addEvent('ready', function() {
      player.addEvent('finish', onFinish);
    });
    $('.playpause').click(function() {
      player.api('paused', function(paused) {
        if (!paused) {
          player.api('pause');
          $(".playpause").removeClass('pause');
        } else {
          player.api('play'); 
          $(".playpause").addClass('pause');
        }
      });
    });
    function onFinish(id) {
      $(".playpause").removeClass('pause');
    }
  });
});

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.


Terms and Conditions

This demonstration can be used subject to the following terms and conditions.

  1. If you wish to use this demonstration in your website(s) please email me stu{at}cssplay.co.uk seeking permission.
  2. You may NOT place this demonstration on another site for others to download.
  3. You may NOT redistrubute or resell this demonstration.
  4. Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.
  5. Please see the Copyright statement above regarding the requirement for a support donation.

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page