Mobile Friendly Website


Doing it with style

CSS DEMOSHTML5 Video Playlist v1.0

Date : 23rd September 2013

For all modern browsers

The Boxtrolls - Trailer

Planes - Playlist

Break The Ice

Iron Compass

Many Adventures


Monster University - with Play/Pause controls


I have been trying to find a suitable HTML5 video player for my clients but have been unable to find a simple player with fallback for IE6, IE7 and IE8 so have decided to produce my own version which meets my requirements.
CSSplay-er is a basic HTML5 player with the normal controls of play/pause, mute, fullscreen (for supporting browsers) and volume/progress sliders.
Touch screens have start/stop on tapping the poster image.

CSSplay-er is also responsive, has support for playlists and uses standard HTML5 video code with no javacript parameters to set up. It can also support more than one instance on a page and only allows one video to be playing at any time (not in IE6, 7 or 8).
The poster image appears at the start of the video.
The HTML5 controls are styled using css so you should be able to 'skin' this as you want. The third video below has just start/stop controls.

Tested in IE6+, Firefox, Opera, Safari, Chrome, iOS, Android OS tablet, Windows wp8 smartphone (Lumia 620) and Samsung smartphone.
Should work in all the latest browsers and devices.
Smartphones and smaller tablets may have their own way of displaying the videos but they should all support the playlist feature. IE6/7/8 use player.swf from JW Player but you can use any alternative.
Contact me for more information.

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


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.


Facebook Twitter rss feed Facebook Fan Page