javascript - 垂直居中全屏视频 div 而不使用 flex

问题描述

我有一个视频，我想覆盖自定义按钮并在全屏中保留它们的位置。

以下代码适用于一个问题（全屏 div 不是居中而是位于屏幕顶部）。

如果我添加display: flex;全屏 div 正确居中，但按钮现在放置不正确。

如何让按钮保持其位置和全屏项目显示在中心？

我对 CSS 缺乏经验，所以我犯的任何其他错误都值得指出。

const main = document.querySelector('.main');

const player = main.querySelector('.player');

const video = player.querySelector('.viewer');


// Use fullscreen video button
function toggleFullscreen() {
  if (document.fullscreenElement) {
    closeFullscreen();
  } else {
    openFullscreen();
  }
}

/* View in fullscreen */
function openFullscreen() {
  if (main.requestFullscreen) {
    main.requestFullscreen();
  } else if (main.webkitRequestFullscreen) { /* Safari */
    main.webkitRequestFullscreen();
  } else if (main.msRequestFullscreen) { /* IE11 */
    main.msRequestFullscreen();
  }
}

/* Close fullscreen */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

// toggle play/pause
function togglePlay() {
  const method = video.paused ? 'play' : 'pause';
  video[method]();
}

.main {
  /*display: flex;*/
  width: 100%;
  overflow: hidden;
}

.player {
  /*display: flex;*/
  max-width: 1920px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.viewer {
  margin: 0 auto;
  width: 100%;
}

.buttons {
  margin: 0 auto;
  position: absolute;
  width: 100%;
  bottom: 6%;
  z-index: 10;
}

.buttons>* {
  position: absolute;
  margin: 0 auto;
}

.btn-fs {
  right: 10%;
}

.btn-play {
  left: 10%;
}

video::-webkit-media-controls {
  display: none !important;
}

<html lang="en">
<meta charset="UTF-8">

<head>
  <title>test</title>
  <link rel="stylesheet" href="test.css">
</head>

<body>
  <div class="main">
    <div class="player">
      <video class="viewer">
          <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>
      <div class="buttons">
        <div class="btn-fs"><button onclick="toggleFullscreen()">Fullscreen</button></div>
        <div class="btn-play"><button onclick="togglePlay()">Play</button></div>
      </div>
    </div>
  </div>
</body>
<script src="test.js"></script>

</html>

标签： javascripthtmlcss

解决方案

尝试将此添加到您的.player课程中：

  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

这是一个工作示例：

const main = document.querySelector('.main');

const player = main.querySelector('.player');

const video = player.querySelector('.viewer');


// Use fullscreen video button
function toggleFullscreen() {
  if (document.fullscreenElement) {
    closeFullscreen();
  } else {
    openFullscreen();
  }
}

/* View in fullscreen */
function openFullscreen() {
  if (main.requestFullscreen) {
    main.requestFullscreen();
  } else if (main.webkitRequestFullscreen) { /* Safari */
    main.webkitRequestFullscreen();
  } else if (main.msRequestFullscreen) { /* IE11 */
    main.msRequestFullscreen();
  }
}

/* Close fullscreen */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

// toggle play/pause
function togglePlay() {
  const method = video.paused ? 'play' : 'pause';
  video[method]();
}

.main {
  /*display: flex;*/
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.player {
  /*display: flex;*/
  max-width: 1920px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.viewer {
  margin: 0 auto;
  width: 100%;
}

.buttons {
  margin: 0 auto;
  position: absolute;
  width: 100%;
  bottom: 6%;
  z-index: 10;
}

.buttons>* {
  position: absolute;
  margin: 0 auto;
}

.btn-fs {
  right: 10%;
}

.btn-play {
  left: 10%;
}

video::-webkit-media-controls {
  display: none !important;
}

<html lang="en">
<meta charset="UTF-8">

<head>
  <title>test</title>
  <link rel="stylesheet" href="test.css">
</head>

<body>
  <div class="main">
    <div class="player">
      <video class="viewer">
          <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>
      <div class="buttons">
        <div class="btn-fs"><button onclick="toggleFullscreen()">Fullscreen</button></div>
        <div class="btn-play"><button onclick="togglePlay()">Play</button></div>
      </div>
    </div>
  </div>
</body>
<script src="test.js"></script>

</html>

javascript - 垂直居中全屏视频 div 而不使用 flex

问题描述

解决方案

推荐阅读