HTML5视频播放器全屏问题

Question

我们在Wordpress网站上发布视频。 我们使用iframe创建了嵌入代码。 当我打开iframed页面全屏正常工作时。 但是全屏iframe页面上的视频无法正常工作。 因为相对于iframe的完整宽度和高度。 我能做什么？

Answer 1

这是因为当您在新标签页中运行IFrame源代码时，它不会在IFrame中打开。 处理通过iframe投放的视频时。 需要设置一个高度，否则浏览器将以150px的静态高度渲染iframe，这对于大多数视频来说太蹲便了，这会使人变得可笑和尴尬。

您可以执行以下操作：

码：

<!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 个解决方案

解决方案1
1 已采纳 2014-12-21 19:48:32

HTML5视频播放器全屏问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-12-21 19:48:32

解决方案1
1 已采纳 2014-12-21 19:48:32