Video for Everybody is the work of Kroc Camen and the code generator is by Jonathan Neal, it essentially is the correct HTML syntax for video delivered in HTML5 with fallbacks in Flash and download links to cover every scenario when the browser is older or has no Flash or Javascript availability.
Initial Set Up
Go to the code generator and pass in at least an MP4 and Webm source for the video and if you want a Flash fallback choose your favourite player. If you don't pass in a Webm or Ogg Firefox and Opera will be stumped and will not fallback to Flash as these browsers are HTML5 ready - only non-HTML5 browsers will use the Flash as a fallback.
Making VFE videos scale in all browsers, tablets and phones for responsive design
The Process
To get this going for responsive design is quite simple; you need to change the inline video width and height values to 100% and then add that video sits in a fluid containing div with a max-width (px) and width (%) value set.
<video id="myvideo3" controls="controls" poster="/videodrome/cgp_video/leeds1974.png" width="100%" height="100%"> <source src="/videodrome/cgp_video/mymovie.mp4" type="video/mp4" /> <source src="/videodrome/cgp_video/mymovie.webm" type="video/webm" /> <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="352"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />..... <img alt="1974 Leeds" src="/videodrome/cgp_video/leeds1974.png" width="640" height="352" title="No video playback capabilities, please download the video below" /> </object> </video>
So in the code above note the width and height are set to a percenatge value 100%
The video code sits in a div with a class of .videocontent with CSS:
.videocontent {
width:80%;
max-width: 640px;
margin: 0 auto;
}
The width value takes care of the scaling value in proportion to it's parent container and I have set the max-width value as I don't want the video displayed as a size beyond 640px. When it hits 640px it is not going any further, conversely you can set the min-width in pixels too.
IE9 and Width & Height % Values
IE9 sees 100% as 100px when declared as a value in an HTML attribute, so you end up with a small square 100px x 100px, so for IE9 we set the CSS width and height style of the video element to 100% which is is honoured...
video{
width:100%;
height:100%}
In IE 10 the %percentage value is honoured when used an an HTML attribute value.
In IE8 since it is a non HTML5 browser it will fallback to Flash and in the Object and Object Img tag I have left the width and height at their original px values.
The iPad Video Pixel v Percentage Height Issue
2nd caveat however with this, there is an issue with the iPad and that is that if the height is not explicitly set in px it defaults to 150px, which is not what we want.
One solution would be to target the iPad specifically and apply a class which sets a pixel value for the hight, so the html markup would now include additional CSS classes...
<video id="myvideo3" class="ipad-portrait ipad-landscape" controls="controls" poster="/videodrome/cgp_video/leeds1974.png" style="width:100%;height:100%;"width="100%" height="100%">...
To target this specifically for iPad use media queries in your CSS...you could set the better pixel height for each portrait and landscape mode
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
.ipad-portrait {height:290px;} /* your css rules for ipad portrait */
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
.ipad-landscape {height:360px;} /* your css rules for ipad landscape */
Thats it, the Video For Everybody code should scale as the viewport changes.