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%;
}

然后用iframe包裹div：

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

HTML嵌入式视频被切断

1 个答案: