Keep iframe ratio with responsive scaling

Question

I would like to keep the dimensions of my video embed (iframe) the same as it scales down.

At the moment two black lines appear and get larger as you scale it smaller.

What would be the simplest way to do it? I would like to do this without Javascript (if possible!).

CSS

img {
   float:left;
   max-width: 100%;
   height: auto;
   margin:0 20px 20px 0;
}

iframe {
  max-width:100%;
  float:left;
  display:inline-block;
  margin:0 20px 20px 0;
}

HTML

<h2>I Like Meat</h2>

<img src="http://www.newhealthguide.org/images/10439404/image001.jpg">

<p>Bacon ipsum dolor sit amet beef turducken andouille ball tip prosciutto. Fatback cow venison, turkey strip steak kielbasa flank ham pancetta filet mignon kevin boudin tongue. Andouille t-bone leberkas beef short loin. Spare ribs tongue rump tri-tip t-bone hamburger pastrami landjaeger sirloin bresaola doner shank salami. Porchetta pancetta ribeye meatball, venison turducken spare ribs doner sirloin t-bone strip steak. Jerky t-bone venison pancetta fatback short ribs chicken turkey pork chop sausage. Turkey doner ball tip ribeye tail.</p>

<p>Sirloin jowl salami, flank porchetta ball tip filet mignon pork tongue ground round swine ham hock hamburger spare ribs frankfurter. Short loin tongue filet mignon ham hock turkey meatball salami strip steak pork chop hamburger jowl. Pork loin tongue short ribs prosciutto chuck. Short loin landjaeger tri-tip, ground round capicola shoulder ham hock pig tenderloin pastrami.</p>

<p>Tail strip steak salami pig sirloin frankfurter kevin short ribs bresaola doner. Bresaola t-bone pork loin prosciutto frankfurter bacon beef meatball. Andouille cow leberkas shankle. Strip steak ribeye chicken, ball tip flank turkey jerky turducken meatball pork chop jowl brisket kevin short loin. Kielbasa jerky meatloaf frankfurter shank filet mignon salami pork belly biltong. Beef ribs ball tip tongue andouille, shankle meatloaf chuck hamburger. Swine ribeye pancetta meatloaf, bresaola bacon ham ground round meatball turkey chicken frankfurter.</p>

<p>Sirloin jowl salami, flank porchetta ball tip filet mignon pork tongue ground round swine ham hock hamburger spare ribs frankfurter. Short loin tongue filet mignon ham hock turkey meatball salami strip steak pork chop hamburger jowl. Pork loin tongue short ribs prosciutto chuck. Short loin landjaeger tri-tip, ground round capicola shoulder ham hock pig tenderloin pastrami.</p>

<img src="http://churchhillnaturalmeats.com/wp-content/uploads/2012/12/churchhill-natural-meats-meat-variety1.jpg">

<p>Bacon ipsum dolor sit amet beef turducken andouille ball tip prosciutto. Fatback cow venison, turkey strip steak kielbasa flank ham pancetta filet mignon kevin boudin tongue. Andouille t-bone leberkas beef short loin. Spare ribs tongue rump tri-tip t-bone hamburger pastrami landjaeger sirloin bresaola doner shank salami. Porchetta pancetta ribeye meatball, venison turducken spare ribs doner sirloin t-bone strip steak. Jerky t-bone venison pancetta fatback short ribs chicken turkey pork chop sausage. Turkey doner ball tip ribeye tail.</p>

<p>Sirloin jowl salami, flank porchetta ball tip filet mignon pork tongue ground round swine ham hock hamburger spare ribs frankfurter. Short loin tongue filet mignon ham hock turkey meatball salami strip steak pork chop hamburger jowl. Pork loin tongue short ribs prosciutto chuck. Short loin landjaeger tri-tip, ground round capicola shoulder ham hock pig tenderloin pastrami.</p>

<p>Tail strip steak salami pig sirloin frankfurter kevin short ribs bresaola doner. Bresaola t-bone pork loin prosciutto frankfurter bacon beef meatball. Andouille cow leberkas shankle. Strip steak ribeye chicken, ball tip flank turkey jerky turducken meatball pork chop jowl brisket kevin short loin. Kielbasa jerky meatloaf frankfurter shank filet mignon salami pork belly biltong. Beef ribs ball tip tongue andouille, shankle meatloaf chuck hamburger. Swine ribeye pancetta meatloaf, bresaola bacon ham ground round meatball turkey chicken frankfurter.</p>

<p>Sirloin jowl salami, flank porchetta ball tip filet mignon pork tongue ground round swine ham hock hamburger spare ribs frankfurter. Short loin tongue filet mignon ham hock turkey meatball salami strip steak pork chop hamburger jowl. Pork loin tongue short ribs prosciutto chuck. Short loin landjaeger tri-tip, ground round capicola shoulder ham hock pig tenderloin pastrami.</p>

<iframe src="//player.vimeo.com/video/88680344?title=0&amp;byline=0&amp;portrait=0&amp;color=f68f85" width="650" height="366" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 

<p>Sirloin jowl salami, flank porchetta ball tip filet mignon pork tongue ground round swine ham hock hamburger spare ribs frankfurter. Short loin tongue filet mignon ham hock turkey meatball salami strip steak pork chop hamburger jowl. Pork loin tongue short ribs prosciutto chuck. Short loin landjaeger tri-tip, ground round capicola shoulder ham hock pig tenderloin pastrami.</p>

<p>Tail strip steak salami pig sirloin frankfurter kevin short ribs bresaola doner. Bresaola t-bone pork loin prosciutto frankfurter bacon beef meatball. Andouille cow leberkas shankle. Strip steak ribeye chicken, ball tip flank turkey jerky turducken meatball pork chop jowl brisket kevin short loin. Kielbasa jerky meatloaf frankfurter shank filet mignon salami pork belly biltong. Beef ribs ball tip tongue andouille, shankle meatloaf chuck hamburger. Swine ribeye pancetta meatloaf, bresaola bacon ham ground round meatball turkey chicken frankfurter.</p>

<p>Sirloin jowl salami, flank porchetta ball tip filet mignon pork tongue ground round swine ham hock hamburger spare ribs frankfurter. Short loin tongue filet mignon ham hock turkey meatball salami strip steak pork chop hamburger jowl. Pork loin tongue short ribs prosciutto chuck. Short loin landjaeger tri-tip, ground round capicola shoulder ham hock pig tenderloin pastrami.</p>

You could use percentages instead of a fixed height and width. Otherwise, javascript is the way to go. — imtheman, Sep 11 '14 at 16:29
See related/dup post here: http://stackoverflow.com/questions/12676725/responsive-iframe-google-maps-and-weird-resizing/12678294#12678294 — cpg, Sep 11 '14 at 16:55

score 0 · Answer 1 · answered Sep 11 '14 at 16:52

You can accomplish this by placing the video inside of a container set to relative. Set the width of the container to 100% and then use padding to create the aspect ratio you want.

Position the video absolute with a width and height of 100% and it will fill the container.

<div class="video">
    <iframe ></iframe> 
</div>

.video{
   width:100%;
   padding-bottom:55.5%;
   position:relative;
}

.video iframe{
 position:absolute;
    width:100%;
    height:100%;
}

Example: http://jsfiddle.net/zt0qjo2m/1/

Thanks, this works but I would like it to stay its original size before resizing like in this example: http://jsfiddle.net/k7xn3o4f/ — Alistair, Sep 12 '14 at 13:09

Keep iframe ratio with responsive scaling

1 Answers1