![]() ![]() Indeed, a percentage padding is, by definition, based on the width of the containing block ( W3C source). The key is to set the padding-top of the parent block of the video in percentage : “Padding property is the magic that styles a box with an intrinsic ratio”. The container width decides the video width and it will scale (in a 16:9 format, adjust the top padding for another format) JSFiddle You might want to add the videowrapper class to the tag in the fusion-text div in your example, but it might ask for some creative padding margins. The technique was brought by Thierry Koblentz in 2009 in the article : Creating Intrinsic Ratios for Video. ![]() Hopefully there is a CSS approach which works perfectly specially if your videos share a same ratio (which is often the case). The side effect of the JavaScript approach is what Ethan Marcotte describes, in his last book Responsive Design : Patterns & Principles, as a “slight visual stutted” when resizing the browser.
0 Comments
Leave a Reply. |