Posted: Saturday 31st of October 2015

This tutorial teaches you how to style any video such as YouTube, Vimeo or Animated video to make it responsive to screen on any device using CSS.

With the huge number of people accessing the internet every day with various devices such as mobile or the computer, it is very important that you give them the best user experience when they visit your website by making your design which may also include videos responsive to screen. By doing this, the people will be able to access your website with ease on any device and at any time.

This system simply wraps an iframe, embed, or video tags with a div which has an id="video_displayer" for demo purpose. You can change things with ease to what you prefer after downloading the script.

It is a very simple to understand CSS based video displayer system which any one with the basic knowledge of CSS can implement.

To demo the system, simply click on the Live Demo button below which will take you to the demo page, at the Demo page, select a desired video from the drop-down box and then resize your browser, view this page on your mobile device, or change your device orientation (landscape, portrait). You'll see that the video resizes proportionally.

You may Download the system below if you like what you have seen.

Download Live Demo