CSSPLAY

CSS DEMOS › Vimeo videos - autopause for all browsers

Date : 9th June 2014

For all modern browsers

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

An autopause function so that only one video at a time can be played and if a playing video goes off screen then it pauses, and continues playing when moved back on screen.

Information

I have been playing with Vimeo videos over the last few weeks and although it is excellent for its ease of use in playing videos in all browsers and on all platforms, it does lack a few 'features'.

For instance it has 'autopause' built in which only allows one video to be playing at any time, BUT this does not work in Internet Explorer. Also, when a playing video goes off screen it continues to play.

I have searched the web for answers to these problems but could not find any, and the information on the Vimeo site is not much help. So I decided to write my own script using jQuery and Froogaloop and this is the result.

Please ignore the quality of the videos as I do not claim to be an expert. These were taken on a recent visit to WWF at Slimbridge and demonstrate the features that I have added.

1. Only one video at a time can play, even on IE8+, so clicking another video play button when another video is playing will pause the playing video.

2. If a video is playing and it is scrolled off the browser window then the video will pause. It will continue again when it is scrolled back into the browser window.

3. If a playing video is scrolled off the browser window it will pause, but if another video is then selected the 'paused' video will stay paused when scrolled back into the brwser window.

4. If the window is resized such that a playing video is moved off the browser window then it will 'pause'. Again it will continue playing if it is moved back into the browser window.

5. No setup is required. All you need to do is ensure that the jQuery and Vimeo Froogaloop scripts are loaded and that the vimeo iframe has 'vime; as part of the 'src' code.

The jQuery routine should be fairly easy to follow and makes use of the 'paused' function to find any playing videos.

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.