html - 嵌入YouTube视频响应解决方案

Question

谁能帮助我:

我试图使嵌入的YouTube视频的宽度为100％，并且响应速度快，
我在此网站上找到此代码以尝试实现此目的:

http://avexdesigns.com/responsive-youtube-embed/

CSS:

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


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

HTML:

<div class="video-container">
     <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

使用以下代码:视频甚至都没有出现:
因此，我将隐藏的代码隐藏起来，将“padding-top”更改为“top”:将视频下推:该视频位于我的页面顶部，并且应该在其下方显示“为什么要凯文·库尔布斯室内设计” /观看下面的视频？”

为了部分获取视频，我希望它从HTML中删除，并相应地调整iframe:

iframe { 
    width: 100%;
    top: 5px;  
    margin-bottom: -5px
}

视频代码为288-304

http://graph-art.matc.edu/harrisd5/vicom126/a2/index.html

这样一来，只要使youtube缩略图的封面照片在播放视频时就响应，它便成为中心。那么，如何使该视频具有100％的宽度和响应速度，同时又将其纵横比保持在“为什么凯文·库尔布斯室内装饰条”之下呢？ ？

Answer 1

在这种情况下，您可以为iframe使用计算出的高度。它是根据youtube视频iframe的页面宽度和默认宽高比计算得出的。

iframe {
    width: 100%;
    top: 5px;
    margin-bottom: -5px;
    height: calc(100vw*(315/560));
}