时间戳

首页 > 解决方案 > iframe 不透明度会破坏视频元素全屏。变黑

html - iframe 不透明度会破坏视频元素全屏。变黑

问题描述

Page A有一个加载Page B包含视频的 iframe。

iframe 仅在元素悬停时可见。它使用不透明度隐藏。

我用户在视频上单击全屏，并且框架的不透明度在下面发生变化。这会导致视频变黑。

下面的代码将模拟这一点，只是在超时后设置不透明度而不是悬停进/出（悬停在我们测试过的各种设置中是喜怒无常的）。

我正在寻找这个问题的解决方案。

一种选择是从父页面发送消息以在 iframe 上设置一个类，例如is-fullscreen然后将 css 添加到父页面以确保opacity: 1 !important视频何时处于全屏模式。这看起来很麻烦而且不太理想，所以我想知道还有什么选择。

索引.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Video Test</title>
    </head>
    <body>
        <iframe
            id="container"
            frameborder="0"
            src="frame.html"
            name="container"
            width="600"
            height="600"
        ></iframe>
        <script>
            setTimeout(function () {
                 document.getElementById('container').style.opacity = 0;
            }, 3000);
        </script>
    </body>
</html>

框架.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title></title>
    </head>
    <body>
        <video
            id="video"
            src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4"
            width="400"
            autoplay=""
            loop=""
            playsinline
            controls=""
            muted
        ></video>
    </body>
</html>

标签： htmlcssiframeopacity

解决方案

推荐阅读