Question

我正在构建一个包含嵌入标题的youtube的网站。这个youtube嵌入是响应和任何浏览器大小的良好扩展，但有一个问题：即使使用padding-bottom：56.25％技巧，视频比屏幕尺寸更高，而宽度是完美的。我需要某种解决方案来使视频的高度与视口大小相匹配，并裁剪或隐藏任何＆＃34;额外的＆＃34;由此产生的视频宽度。

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将视口的高度添加为高度，因此它会覆盖整个屏幕。

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

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

1 个答案: