Creating Intrinsic Ratios for Video

by Thierry Koblentz

24 Reader Comments

Back to the Article
  1. Great article.  I’m struggling to find a solution for the same idea, but rather than having the height of the wrapper-div based on the width of the window—I need the opposite—the width of the wrapper-div be based on the height of the window.  Any thoughts on this?

    Copy & paste the code below to embed this comment.
  2. Thanks Thierry, really useful article. Bytheway, what video format do you suggest? I like flv anf avi, works best for me.

    Copy & paste the code below to embed this comment.
  3. @dedsused

    Thanks.
    Unfortunately, I don’t know much about videos so I can’t answer your question.
    May be someone here will be able to…

    Copy & paste the code below to embed this comment.
  4. This is an issue I’ve been struggling with for a week – and this solves a lot of the problems I’ve been having – thanks.

    Couple of questions tho’:

    First… is it possible to add the same resizing relative to browser height?

    And second, I’m now having a problem trying to center the video in the browser window – would you have any suggestions about which method might best apply here…?

    much appreciated!

    Copy & paste the code below to embed this comment.
  5. @Piers

    Hi,
    As far as I know, there is no pure CSS solution to resize an element based on the height of the viewport (while keeping its aspect ratio).

    Centering the video is a matter of centering the parent container, the one that provides the padding computation.

    Copy & paste the code below to embed this comment.
  6. A client was asking for something similar to this to be implemented – should be able to sort it now :)

    Copy & paste the code below to embed this comment.
  7. Hmm… I’m trying to use this, but something is wrong. Can you, please, take a look at following part of css:

    .videoWrapper div,
    .videoWrapper embed,
    .videoWrapper object {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;

    and check it again? All is fine there?

    Thanks!

    Copy & paste the code below to embed this comment.
  8. Hi Noak,

    Yes, this rule is correct.

    It could be an issue with your markup or with other rules(?).
    Do you have a page I can look at?

    Copy & paste the code below to embed this comment.
  9. Brilliant information helped with embedding my vids correctly, thanks!

    Copy & paste the code below to embed this comment.
  10. Unfortunately, I’m don’t use video on my blog now, but I liked the article because there is a thought to use these knowledge on another project which will be a lot of video clips! Thank for article!

    Copy & paste the code below to embed this comment.
  11. Brilliant workaround. Thanks for ensuring the code validates properly too – I’ve had some nasty experiences with the object tag in the past.

    Copy & paste the code below to embed this comment.
  12. Your article is well thought out and extremely well written. Clearly you know your CSS. But Flash is incompatible with iPhone. How do I get other video on iPhone?

    Copy & paste the code below to embed this comment.
  13. Very useful article even two and a half years later. 

    I’m using your technique (as closely as I can) to post video on my blog.  It is working for all current browsers EXCEPT IE9.  I have spent hours unsuccessfully trying to figure this out.  An example can be found here:

    http://blog.tlinn.com/2011/09/rogue-river/

    I don’t have any conditional statements in the <object> code; don’t know where to put them.  But the video plays fine when the <div class=“video-wrapper”> and <div class=“video-container”> are removed.  Any thoughts?  Thanks.

    Copy & paste the code below to embed this comment.
  14. Very useful article… Thank so much Thierry…

    May I translate this article into Indonesian?

    Copy & paste the code below to embed this comment.