在页面上垂直居中 videojs？

Question

上下文： Electron 使用 Timeline.js 的桌面应用程序，它通过 iFrame 嵌入 Video.js。 iFrame 源代码如下。

我已经为此苦苦挣扎了几个小时：我需要将 Video.js 实例垂直居中在它所在的 iFrame 中。我不能对值进行硬编码，因为该应用程序（不仅是 videojs）可以全屏显示。

使用下面的"brute force"CSS，"works"但显然黑边是不行的。我删除了它，并在 vjs vjs-16-9 CSS 中添加了一个引用，它工作得很好：根据内容设置大小，在全屏模式下调整大小——一切都很好，除了我无法理解了解如何在 iFrame 中垂直居中 vjs 实例。

可能是一些简单的东西，但我是新手。

.video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
}

使用`vjs-16-9`CSS

iFrame 来源

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Video.JS Example</title>
    <link href="../node_modules/video.js/dist/video-js.min.css" rel="stylesheet">
    <script src="../node_modules/video.js/dist/video.min.js"></script>

<style>
   html, body {
        height:100%;
        width:100%;
        padding: 0px;
        margin: 0px;
      }

    </style>
</head>

<body>
    <div>
        <video id="videoPlayer" class="video-js vjs-default-skin vjs-16-9" controls preload="auto">
        </video>
    </div>

    <script>
        function getParamValue(paramName) {
            var url = window.location.search.substring(1);
            var qArray = url.split('&');
            for (var i = 0; i < qArray.length; i++) {
                var pArr = qArray[i].split('=');
                if (pArr[0] == paramName)
                    return pArr[1];
            }
        }

        // grap the video & poster frame refs from url
        var videoSrc = getParamValue('videoSrc');
        videoSrc = "assets/videos/" + videoSrc;

        var poster = getParamValue('poster');
        poster = "assets/images/" + poster;

        videojs("videoPlayer", {}, function () {
            this.src(videoSrc);
            this.poster(poster);
            this.load();
        });

    </script>
</body>
</html>

Answer 1

很可能，iframe 有自己的样式。因此，需要蛮力Css。但要回答有关 iframe 对齐中心的问题。您可能想要探索更多关于使用 flex 、对齐内容、对齐中心的信息。

还有其他替代方法，例如使用 float，但除非您真的别无选择，否则使用 float 不是一个好习惯。原因是。在某些情况下，浮动可能会有不同的反应并弄乱对齐..

希望我的信息对您有所帮助。干杯。

Answer 2

终于找到了一个看起来并不脆弱的解决方案：Vertical align anything with just 3 lines of CSS。

分配给包含videojs实例的div

.centerVertically {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

   <div class="centerVertically">
        <video id="videoPlayer" class="video-js vjs-default-skin vjs-16-9" controls preload="auto">
        </video>
    </div>

在页面上垂直居中 videojs？

centering videojs vertically on a page?

javascript

css

iframe

timeline.js

使用`vjs-16-9`CSS

iFrame 来源

在页面上垂直居中 videojs？

centering videojs vertically on a page?

javascript

css

iframe

timeline.js

使用vjs-16-9CSS

iFrame 来源

使用`vjs-16-9`CSS