Question

我在网页上使用以下HTML代码：

HTML

<iframe id="okplayer" style="position: fixed; left: -10%; top: -10%; overflow: hidden; z-index: -999; height: 120%; width: 120%; opacity: 1; display: none;" allowfullscreen="1" title="YouTube video player" src="https://www.youtube.com/embed/mJY4rHEtohM?autohide=1&amp;autoplay=0&amp;cc_load_policy=0&amp;controls=3&amp;enablejsapi=1&amp;fs=0&amp;modestbranding=1&amp;origin=http%3A%2F%2Fwww.panaramica.com&amp;iv_load_policy=3&amp;loop=1&amp;showinfo=0&amp;rel=0&amp;wmode=opaque&amp;hd=1&amp;widgetid=1" width="640" height="360" frameborder="0"></iframe>

但该视频未在iPhone / iPad和Android移动设备上显示。

PD：HTML属于wordpress主题，所以如果可能，我不想触摸它。

谢谢！

Answer 1

好的，我真的不明白最后两句话。但是这里有一些代码可行。如果您嵌入视频而不是从地址栏复制视频链接也会更好，因为嵌入链接已经具有视频宽度和高度所需的所有功能。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>My first web page</title>
    <link rel="stylesheet" href="style.css">
    <div class="videoWrapper">
    <iframe width="560" height="349" src="https://www.youtube.com/embed/mJY4rHEtohM" frameborder="0" allowfullscreen></iframe>
</div>
</head>
</html>

CSS：

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* Use 75% for 4:3 videos */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

如果您刚刚使用视频，那么您将无需使用其他css代码，所有您需要的就是我所拥有的。我在我的iPad和我的Android手机上尝试过这种方法，效果非常好。

移动设备中的视频背景：响应

1 个答案: