Breadcrumb Content

Main Content

Responsive Playlist

May, 30, 2012 | CSS

Last week I started working on a responsive playlist (for videos) as a new tutorial. I actually began the project with local MP4 and OGV videos. I sort of ran into a snag, (browser issues on all levels naturally) which propelled me to rethink my approach. I decided to implement, Youtube, Vimeo and Dailymotion instead of using personal videos.

The first example I developed includes some simple Ajax functions to rotate the videos. The links can be found in the sidebar and it works pretty well considering. The max size of the layout is 1200px and minimum size is 760px, which is around the size of your typical tablet. You can view it at

The second example is much more conventional and has the links at the bottom. It has a max width of 960px and a minimum 480px, which is around the size of your basic smartphone. You can view it at

There are a few issues with this playlist; Vimeo does not stream as freely (it could be the videos I decided to stream as an example) as Youtube or Dailymotion. This method also works better on a live server as oppose to running it on your desktop or local server. If you would like to download the source file, click here  For more info on responsive videos, you can visit

Mr. Blox

I dream in code, find conformity repulsive and drink excessive amounts of coffee...

Comments are closed.