HTML嵌入视频被截断

Question

我正在尝试将 YouTube 中的视频嵌入到我的网站中。我想知道是否有一种方法可以根据窗口大小关联宽度和高度。例如，在 iPhone 上，它看起来类似于 THIS 。我可以将视频宽度缩小到小于显示尺寸吗？我可以以某种方式结合我的响应式网站来实现这一点吗？

它在计算机或其他大屏幕设备上运行良好，但不适用于移动设备。

来源:

<center><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zRDi1DT3AFA?rel=0" frameborder="0" allowfullscreen></iframe></center>

Full page source

感谢您的帮助!

[编辑:来源]

Answer 1

可以通过覆盖 Youtube 样式 (CSS) 来嵌入响应式 Youtube 视频。

添加以下 CSS:

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

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

然后用 div 包裹 iframe:

<div class="video-con">
  <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zRDi1DT3AFA?rel=0" frameborder="0" allowfullscreen></iframe>
</div>