javascript - 如何使 Youtube 嵌入适合屏幕高度，同时让它的宽度溢出

Question

我正在构建一个网站，其中包含一个嵌入的 YouTube 作为标题。这个 youtube 嵌入是响应式的，并且在任何浏览器尺寸上都能很好地缩放，但有一个问题:即使使用 padding-bottom: 56.25% 技巧，视频也比屏幕尺寸高，而宽度却很完美。我需要某种解决方案来使视频的高度与视口(viewport)大小相匹配，并因此裁剪或隐藏视频上的任何“额外”宽度。

HTML:

<header class="postingHeader">
  <div class="video-container">
    <div id="my-video"></div>
    <div id="quoteContainer">
     <h1 id="bioTitle2">"Title"</h1> 
     <p id="bioQuote2">“Quote”</p>
    </div>
  </div>    

CSS:

.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;}

.video-container iframe, .video-container object, .video-container embed, .video-container img {
        position: absolute;
        width: 100%;
        height: 100%;
    }

我在 16:10 的屏幕上对此进行了测试，它看起来很完美。提前致谢。

Answer 1

你为什么要这样做？您不想让人们看到完整的视频吗？

您可以通过将响应式容器包装在一个 div 中来完成此工作，该 div 上设置了溢出隐藏。然后使用一些 javascript 将视口(viewport)的高度添加为高度，使其覆盖整个屏幕。

$(document).ready(function(){
  height = $(window).height();
  $(".viewport_control").css({"height": height});
});

您可能还想将视频居中，所以添加

top: 50%;
left: 50%;
transform: translate(-50%, -50%)

我为你构建了一个 codepen，这样你就可以看到它的运行情况

http://codepen.io/bekreatief/pen/Hirbq/