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

【问题标题】：How to make a Youtube embed fit screen height, while letting its width overflow如何使 Youtube 嵌入适合屏幕高度，同时让它的宽度溢出
【发布时间】：2014-10-30 18:04:02
【问题描述】：

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

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 的屏幕上对此进行了测试，它看起来很完美。提前致谢。

【问题讨论】：

嗨。你解决了这个问题吗？我也面临同样的事情。

标签： javascript jquery html css youtube

【解决方案1】：

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

您可以通过将响应式容器包装在 div 中来完成这项工作，该 div 上设置了溢出隐藏。然后使用一些 javascript 将视口的高度添加为高度，因此它确实覆盖了全屏。

$(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/

【讨论】：