CODEWITHSUNDEEP
htmlcssvideo
TacoCat
TacoCat

Reputation: 469

Maintaining a videos aspect ratio in a responsive layout

I'm trying to maintain a videos aspect ratio in a responsive layout to prevent black edges when the layout changes size. So far, I've set up some media queries, but while re-sizing there are still some points that the video has black edges.

You can see the layout and video here http://smedia.lv/ (the SHOWREEL video).

The video is embedded from Vimeo with an iframe and it has a width and height of 100%. The video container width depends on the screen size and is also defined in %, the height is a fixed value.

How can I keep the aspect ratio of the video, so it doesn't have the black edges?

Upvotes: 0

Views: 2166

Answers (1)

coderfin
coderfin

Reputation: 1763

What you want is fluid width video.

Adding just a few styles to your container (.video) and the iframe will accomplish this.

.video {
  height: 410px;
  width: 964.71px;
  margin: 0 auto;
}
iframe {
  width: 100%;
  height: 100%;
}
/* Adjust the max-width depending on the other styles on your site. */
@media(max-width: 1046px) {
  .video {
    position: relative;
    /* 40:17 aspect ratio */
    padding-bottom: 42.5%;
    height: 0;
    width: auto;
  }
  iframe {
    position: absolute;
    top: 0;
    left: 0;
  }
}

Checkout the example below.

Note:

  • You can use a media query to setup a breakpoint at which point the video will grow no bigger than 964.71x410.
  • You will need to update the padding-bottom, .video width, and media query to reflect the correct aspect ratio of your video if it changes.

.video {
  height: 410px;
  width: 964.71px;
  margin: 0 auto;
}
iframe {
  width: 100%;
  height: 100%;
}
@media(max-width: 1046px) {
  .video {
    position: relative;
    /* 40:17 aspect ratio */
    padding-bottom: 42.5%;
    height: 0;
    width: auto;
  }
  iframe {
    position: absolute;
    top: 0;
    left: 0;
  }
}
<div class="video">
  <iframe src="https://player.vimeo.com/video/120261170" width="500" height="213" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Upvotes: 1

Related Questions