如何确定iFrame的宽高比是否敏感? [英] How Do I Make Sure An iFrame's Aspect Ratio Is Responsive?

问题描述

我有一个非常简单的问题. 如何确保iframe的宽高比能够响应?

I have a very simple question. How do I make sure an iframe's aspect ratio is responsive?

iframe是YouTube视频，无论浏览器窗口大小如何，我都希望iframe的纵横比保持16:9.

The iframe is a YouTube Video, and I want the aspect ratio of the iframe to remain 16:9 no matter the browser window size.

这是我当前用于移动设备的代码:

Here is my current code for mobile devices:

@media screen and (max-width: 600px) {
  iframe, body {
    max-width: 90vw;
    height: auto;
  }
}

iframe {
  border: 0;
  width: 600px;
  height: 338px;
}

由于YouTube iframe不会自动保持宽高比，因此我需要一种方法来保持视频的宽高比，并且宽度应为90vw.当前代码的问题在于，它仅调整宽度，而留下不需要的信箱.

Because YouTube iframes do not keep aspect ratio automatically, I need a way to keep the aspect ratio of the video, and the width to be 90vw. The problem with this current code is that, it only adapts the width, leaving unwanted letterboxing.

推荐答案

您确实不需要媒体查询来实现此目的，但是如果需要，可以将其移入媒体查询中.那么，如何实现呢?

You really don't need media query to achieve this but if you want, you can shift it inside media query. So, how is it being achieved?

因为我们知道我们需要aspect ratio of 16:9，并且宽度不应超过 90vw ，因此高度也不应超过 50.85vw .然后，根据您的容器的绝对尺寸限制 600px和338 px 设置max-height and max-width. 现在，设置iframe dimensions to the 100% of the container，它将继承该尺寸. :)

Since, we know we need the aspect ratio of 16:9 and the width should not exceed 90vw, thus the height should also not exceed 50.85vw. And we set the max-height and max-width according to your absolute dimension limits that is 600px and 338 px of the container. Now, setting the iframe dimensions to the 100% of the container, it inherits that dimensions. :)

.tv-wrapper {
  max-width:600px;
  max-height:338px;
  width:90vw;
  height:50.85vw;
  margin:0 auto;
}
iframe {
  width:100%;
  height:100%;
}

<div class="container">
      <div class="tv-wrapper">
          <iframe class="sproutvideo-player" src="//videos.sproutvideo.com/embed/489adcb51e1debcdc0/e0d9daac7a1a9b30?
bigPlayButton=false&amp;showControls=false" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
          </div>
    </div>

这篇关于如何确定iFrame的宽高比是否敏感?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！