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

How to make a Youtube embed fit screen height, while letting its width overflow

本文关键字：溢出 高度 Youtube 何使 屏幕      更新时间：2023-09-26

我正在构建一个包含youtube嵌入作为标题的网站。这个youtube嵌入响应迅速，在任何浏览器大小上都能很好地扩展，但有一个问题：即使使用填充底部：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的屏幕上测试了这个，它看起来很完美。提前谢谢。

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

您可以通过将响应容器包装在div中来实现这一点，div上隐藏了溢出设置。然后使用一些javascript将视口的高度添加为高度，这样它就可以覆盖整个屏幕。

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

此外，您可能希望将视频居中，因此添加

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

我给你做了一个代码笔，这样你就可以看到它在中的作用

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

相关文章：