CSSPLAY
Doing it with style
Doing it with style
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.
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="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<article class="parent">
<div class="overlay">
<iframe src="https://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>
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;
}
}
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.
This demonstration can be used subject to the following terms and conditions.
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.
