HTML5视频播放器全屏问题

Question

We publish video on Wordpress site. 我们在Wordpress网站上发布视频。 We created a embed codes with iframe. 我们使用iframe创建了嵌入代码。 When i open iframed page fullscreen work with normally. 当我打开iframed页面全屏正常工作时。 But video inside of iframe on page, fullscreen don't work. 但是全屏iframe页面上的视频无法正常工作。 Because full width and height relative to iframe. 因为相对于iframe的完整宽度和高度。 What can i do? 我能做什么？

Answer 1

It's because when you run the IFrame source in the new tab it doesn't open in the IFrame. 这是因为当您在新标签页中运行IFrame源代码时，它不会在IFrame中打开。 when dealing with video that is delivered via iframe. 处理通过iframe投放的视频时。 Setting a height is required, otherwise browsers will render the iframe at a static height of 150px, which is far too squat for most video and makes for more Ridiculous and Embarrassing. 需要设置一个高度，否则浏览器将以150px的静态高度渲染iframe，这对于大多数视频来说太蹲便了，这会使人变得可笑和尴尬。

Here is what you can do: 您可以执行以下操作：

Code: 码：

<!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>

With this technique, you wrap the video in another element which has an intrinsic aspect ratio, then absolute position the video within that. 使用此技术，您可以将视频包装在另一个具有固有长宽比的元素中，然后将视频绝对定位在其中。 That gives us fluid width with a reasonable height we can count on. 这样就给我们提供了可以依靠的合理高度的流体宽度。

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