Question

我想知道如何调整视频大小，使其适合在移动屏幕上显示。该视频可以在计算机上正常播放，但在移动设备上，视频太大且被截断。我该怎么办？

我正在WordPress上使用Avada主题。

Answer 1

限制iframe，以确保它不会消失：

#post-10 iframe {
max-width: 100%;
}

您还可以将其扩展到仅用于移动设备：

@media only screen and (max-width: 735px) {
#post-10 .fusion-column-wrapper {
padding: 0;
margin: -20px;
} }

Answer 2

您需要将iframe包裹在div中，并为其添加一些样式。您的html会很简单，如下所示：

<div class="videowrapper">
    <iframe ...>
</div>

您还需要一点CSS才能使包装器做出响应，并用视频填充该包装器：

.videowrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.videowrapper iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

查看此小提琴以查看其实际效果。容器的宽度决定了视频的宽度，视频会自动缩放（以16：9格式，将顶部填充调整为其他格式）

JSFiddle

在您的示例中，您可能想将videowrapper类添加到融合文本div的

标记中，但可能需要一些创造性的填充边距...

调整视频大小以适合移动屏幕

2 个答案: