Responsive HTML5 video

People are watching videos all the time on various devices on different screen sizes. So it is very important to create responsive videos without using flash video player. Why? Because flash is not compatible with iphones, ipads and other Apple devices.

There are 3 supported video formats: mp4, ogg, webm. Make sure you convert your video to all these formats, otherwise it might not work on all browsers.

Dont forget to add control attribute to video element, it adds video controls, like play, pause and volume.

The HTML5 video element can be used with multiple select elements which can link to different video files. Browser will always use the first recognized video format.


<video controls>
  <source src="html5-video.mp4" type="video/mp4">
  <source src="html5-video.ogv" type="video/ogg">
  <source src="html5-video.webm" type="video/webm">

Make all video elements 100% wide, to fit all screens nicely. If you want to specify eg. 600 px maximum width, just add max-width: 600px; to your stylesheet.


video {  

Demo »


Related articles

Redirect www to non www with .htaccess RewriteRule

Redirect www to non www with .htaccess RewriteRule


Redirect your websites visitors from to without www.

Unordered List Style Image CSS

Unordered List Style Image CSS


Learn how to style UL with any image using CSS.

OL and UL List CSS Style

OL and UL List CSS Style


Styling ordered and unordered lists is easy. Just write a single line of CSS to change the list style type.

1 comment

Eraclio R2014-08-20 23:36

What about aspect ratio? You will need more CSS styles to keep the size proportionally, like here: Styles in your example won't do this.

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the flower *

Find us on Facebook



Back to Top