在頁面上垂直居中 videojs？

Question

上下文：使用Timeline.js Electron桌面應用程序，它通過iFrame嵌入Video.js 。 iFrame 源如下。

我已經為此苦苦掙扎了幾個小時：我需要在Video.js在的iFrame垂直居中Video.js實例。 我無法對值進行硬編碼，因為應用程序（不僅是 videojs）可以全屏顯示。

使用下面的“蠻力”CSS，它“有效”，但顯然黑條是不可接受的。 我刪除了 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

終於找到了一個看起來並不脆弱的解決方案： Vertical align any with only 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>

Answer 2

最有可能的是，iframe 有自己的樣式。 因此，需要蠻力 Css。 但是要回答關於對齊 iframe 中心的問題。 您可能想探索更多有關使用 flex 、對齊內容、對齊中心的信息。

還有其他替代方法，例如使用 float 但 float 不是一個好習慣，除非您真的別無選擇使用它。 原因是。 Float 可能會有不同的反應，並且在某些情況下會弄亂對齊方式..

我希望我的信息有幫助。 干杯。

在頁面上垂直居中 videojs？

問題描述

使用`vjs-16-9` CSS

iFrame 源

2 個解決方案

解決方案1
3 已采納 2017-02-01 05:06:04

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

在頁面上垂直居中 videojs？

問題描述

使用vjs-16-9 CSS

iFrame 源

2 個解決方案

解決方案1 3 已采納 2017-02-01 05:06:04

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

使用`vjs-16-9` CSS

解決方案1
3 已采納 2017-02-01 05:06:04

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