Question

我们在Wordpress网站上发布视频。我们使用iframe创建了一个嵌入代码。当我正常打开iframed页面全屏工作。但是页面上的iframe视频，全屏不起作用。因为相对于iframe的全宽和高度。我该怎么办？

Answer 1

这是因为当您在新标签中运行IFrame源时，它不会在IFrame中打开。处理通过iframe传送的视频时。设置一个高度是必需的，否则浏览器会将iframe渲染到150px的静态高度，这对于大多数视频来说太蹲太多了，这使得更多的荒谬和尴尬。

以下是您可以做的事情：

<强>代码：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
    .videoContainer {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 25px;
        height: 0;
    }
    .videoContainer iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    </style>
</head>
<body>
    <div class="videoContainer">
        <iframe scrolling="no" width="640" height="360" src="http://video.localhost/embed?video=HLuUyE9-qcA&width=640&yukseklik=360&kali‌te=medium&vidp=11783" style="overflow: hidden;" frameborder="0" allowfullscreen></iframe>
    </div>
</body>
</html>

使用此技术，您可以将视频包装在具有固有宽高比的另一个元素中，然后将视频绝对置于其中。这给了我们流畅的宽度，我们可以依靠合理的高度。

HTML5视频播放器全屏问题

1 个答案: