Question

我正在尝试创建一个自适应模板，而我正在为youtube视频使用iframe。

当我在视频下方添加标题时，它在桌面上工作正常，但当我进入响应式移动模式时，标题和视频之间存在很大差异。

任何人都可以帮我解决问题，因此无论我是在桌面还是移动设备上，标题都会保留在视频下方。

以下是我的模板的链接： http://www.sayarts.com/past-events.html

Answer 1

您没有使用正确的方法来使视频响应。视频的高度仍然是固定的，这就是为什么他们在手机上的视频和字幕之间存在巨大差距的原因。

要使视频完全响应，请将视频添加到div中，如下所示：

<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

然后使用以下CSS：

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

您可以在this article

中详细了解相关信息

Answer 2

您可以简单地将此样式添加到包装器元素：height：auto，它似乎可以解决问题。

#wrapper embed, #wrapper iframe {
    max-width: 100%;
    height: auto;
}

如果您需要更多控制权，请使用响应式媒体查询，这是一个示例：

@media only screen and (max-width: 468px) {
    body {
        /*you specific styles*/
    }
}

响应视频iframe移动和笔记本电脑

2 个答案: