Esküvő

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.

HTML

<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">
</video>

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.

CSS

video {  
   width:100%;
}

Demo »


Esküvő


Related articles

Redirect www to non www with .htaccess RewriteRule

Redirect www to non www with .htaccess RewriteRule

05/12/2015

Redirect your websites visitors from www.domain.com to domain.com without www.

Unordered List Style Image CSS

Unordered List Style Image CSS

06/03/2013

Learn how to style UL with any image using CSS.

OL and UL List CSS Style

OL and UL List CSS Style

03/03/2013

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: http://basicuse.net/articles/pl/textile/html_css/resizing_youtube_and_html5_videos_proportionally_using_css_for_responsive_web_design 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 apple *


Find us on Facebook

Tags

Esküvő

Back to Top