CSSPLAY

CSS DEMOS › Vimeo videos - Hiding the control bar

Date : 17th June 2014

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

The basic Vimeo player with control bar at the bottom.

CODE:

<iframe class="vimeo" src="https://player.vimeo.com/video/97930590" frameborder="0"></iframe>

CSS:

.vimeo {display:block; width:638px; height:358px; margin:0 auto;}

Increase the height of the iframe so that the player controls are moved below the video.

CODE:

<iframe class="vimeoXtra" src="https://player.vimeo.com/video/97930590" frameborder="0"></iframe>

CSS:

.vimeoXtra {display:block; width:638px; height:558px; margin:0 auto;}

Add an outer div which is the original size of the video and style this with overflow:hidden; and add a negative top margin to the iframe to move the video back into view.
The size of the top margin is half the increased size of the iframe.

CODE:

<div class="vimeoFrame"> <iframe class="vimeoXtra" src="https://player.vimeo.com/video/97930590" frameborder="0"></iframe></div>

CSS:

.vimeoFrame {width:638px; height:358px; overflow:hidden; margin:0 auto;} .vimeoFrame .vimeoXtra {margin-top:-100px;}

.. and finally to have the controls show on tablets and smartphones add a @media query to reset the size and top margin of the iframe.

CSS:

@media only screen and (max-width: 768px) { .vimeoFrame .vimeoXtra { width:638px; height:358px; margin-top:0;} }

Information

A simple method of hiding the control bar from the Vimeo video player.

This just uses CSS and a wrapper div, and allows you to play and pause a video just by clicking it.

Because this does not work on the iPad and iPhone I have added a fallback for tablets and smartphones so that the controls are visible on these devices.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. 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.