在页面上垂直居中 videojs？

Question

Context: Electron desktop app using Timeline.js which is embedding Video.js through an iFrame .上下文：使用Timeline.js Electron桌面应用程序，它通过iFrame嵌入Video.js 。 The iFrame source is below. iFrame 源如下。

I've been struggling with this for a few hours now: I need to vertically center the Video.js instance in the iFrame it is within.我已经为此苦苦挣扎了几个小时：我需要在Video.js在的iFrame垂直居中Video.js实例。 I can't hardcode values because the app (not only videojs) can go full screen.我无法对值进行硬编码，因为应用程序（不仅是 videojs）可以全屏显示。

Using the "brute force" CSS below, it "works" but obviously the black bars are not acceptable.使用下面的“蛮力”CSS，它“有效”，但显然黑条是不可接受的。 I removed that an added a ref to the vjs vjs-16-9 CSS and it works great: sets up size based on content, resizes in full screen mode – all good except that I haven't been able to figure out how to center the vjs instance vertically in the iFrame.我删除了 vjs vjs-16-9 CSS 的一个引用，它工作得很好：根据内容设置大小，在全屏模式下调整大小——一切都很好，只是我不知道如何居中iFrame 中垂直的 vjs 实例。

Probably something simple but I'm new at all this.可能很简单，但我对这一切都很陌生。

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

Using `vjs-16-9` CSS使用`vjs-16-9` CSS

iFrame source 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

Finally found a solution which doesn't seem fragile: Vertical align anything with just 3 lines of CSS .终于找到了一个看起来并不脆弱的解决方案： Vertical align any with only 3 lines of CSS 。

Assigned to the div containing the videojs instance分配给包含 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>

Answer 2

Most likely , iframe has its own styling by its own.最有可能的是，iframe 有自己的样式。 Hence , brute force Css is needed.因此，需要蛮力 Css。 But to answer your question regarding aligning center for your iframe.但是要回答关于对齐 iframe 中心的问题。 You might want to explore more on using flex , justify content, justify center.您可能想探索更多有关使用 flex 、对齐内容、对齐中心的信息。

There are also other alternative such as using float but float is not a good practice to use unless you really have no choice of using it.还有其他替代方法，例如使用 float 但 float 不是一个好习惯，除非您真的别无选择使用它。 The reason is.原因是。 Float might react differently and mess up the alignment at certain occasions .. Float 可能会有不同的反应，并且在某些情况下会弄乱对齐方式..

I hope my information helps.我希望我的信息有帮助。 Cheers.干杯。

在页面上垂直居中 videojs？

问题描述

Using `vjs-16-9` CSS使用`vjs-16-9` CSS

iFrame source iFrame 源

2 个解决方案

解决方案1
3 已采纳 2017-02-01 05:06:04

解决方案2
0 2017-02-01 00:13:50

在页面上垂直居中 videojs？

问题描述

Using vjs-16-9 CSS使用vjs-16-9 CSS

iFrame source iFrame 源

2 个解决方案

解决方案1 3 已采纳 2017-02-01 05:06:04

解决方案2 0 2017-02-01 00:13:50

Using `vjs-16-9` CSS使用`vjs-16-9` CSS

解决方案1
3 已采纳 2017-02-01 05:06:04

解决方案2
0 2017-02-01 00:13:50