視頻容器不適應瀏覽器窗口的大小

Question

我想讓我的 div 與類容器可調整以改變窗口的大小。 所以我在網上發現我需要resize-observer-border-radius。 我查看源代碼並將其調整為我的代碼，但我的容器始終保持相同的大小。 它不響應窗口的大小變化。 這是我的 index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <div class="container">
      <div class="video-container">
        <video id="video1" >
          <source
            src="https://someurl/sample-mp4-file.mp4"
            type="video/mp4"
          />

          Your browser does not support the video tag.
        </video>
        <div>
          <button onclick="playPause()">Play/Pause</button>
        </div>
      </div>
    </div>

    <script>
      const myVideo = document.getElementById("video1");
      function playPause() {
        if (myVideo.paused) myVideo.play();
        else myVideo.pause();
      }

      const resizeObserver = new ResizeObserver((entries) => {
        for (let entry of entries) {
          if (entry.contentBoxSize) {
            entry.target.style.borderRadius =
              Math.min(
                100,
                entry.contentBoxSize.inlineSize / 10 +
                  entry.contentBoxSize.blockSize / 10
              ) + "px";
          } else {
            entry.target.style.borderRadius =
              Math.min(
                100,
                entry.contentRect.width / 10 + entry.contentRect.height / 10
              ) + "px";
          }
        }
      });

      resizeObserver.observe(document.querySelector(".container"));
    </script>
   

  </body>
</html>

這是我的文件 style.css

.body {
  height: inherit;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-container {
  border-radius: 4px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
video {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  margin-bottom: 20px;
}

我按照教程，但它不起作用。 我是新手，所以請理解我的問題。 感謝您的高級幫助。

Answer 1

在使用entry.contentBoxSize.inlineSize之前，請嘗試使用entry.contentBoxSize.inlineSize檢查它是否確實存在

console.log("inlineSize is:", entry.contentBoxSize.inlineSize)

當我嘗試這個時，它是undefined 。

視頻容器不適應瀏覽器窗口的大小

問題描述

1 個解決方案

解決方案1
0 2021-10-18 21:26:26

視頻容器不適應瀏覽器窗口的大小

問題描述

1 個解決方案

解決方案1 0 2021-10-18 21:26:26

解決方案1
0 2021-10-18 21:26:26