如何安排youtube iframe的比例高度

Question

我想为 youtube 链接使用 100% 宽度和比例高度。

但似乎高度得到了不正确的值。

请帮忙

  
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  
  
  <div data-role="tabs" id="tabs">
        <div data-role="navbar">
            <ul>
                <li><a href="#one" class="ui-btn-active" data-ajax="false">Film</a></li>
                <li><a href="#two" data-ajax="false">Trailer</a></li>
 
            </ul>
        </div>
        <div id="one">
          <br />   
        
            
        </div>
        <div id="two">
            <br />   
            <iframe  style="width:100%; border: none"
                    src="https://www.youtube.com/embed/sR_G6XXZaNI"></iframe>
        </div>
       
    </div>

Answer 1

您可以将高度除以宽度以获得代表视频纵横比的百分比高度，将视频放在一个元素中，将父元素的高度设置为0并将百分比指定为顶部或底部填充，然后制作iframe绝对定位为 100% 高度和宽度，因此它填充父级。父级的宽度为 100%，高度与视频的高度成正比。Youtube 视频是 16:9，所以高度 % 是 56.25%。这是一个例子。技术来自这篇文章 - https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

body {margin:0;}
.videoContainer {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  width:100%;
}
.videoContainer iframe {
  position: absolute;
  top: 0; left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

<div class="videoContainer">
<iframe src="https://www.youtube.com/embed/sR_G6XXZaNI"></iframe>
</div>