让视频在网页居中 高度 匹配到手机平板

Question

问题遇到的现象和发生背景

接上个问题 后续

遇到的现象和发生背景，请写出第一个错误信息

视频 播放 电脑端 可以使用 如何适应平板 手机上面播放的 宽度*高度

用代码块功能插入代码，请勿粘贴截图。 不用代码块回答率下降 50%

CSS样式 请写出来

//让视频在网页居中  高度 匹配到手机平板
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}'>
    <source id="source" type="application/x-mpegURL">
</video>

运行结果及详细报错内容

我的解答思路和尝试过的方法，不写自己思路的，回答率下降 60%

我想要达到的结果，如果你需要快速回答，请尝试 “付费悬赏”

Answer 1

1.使用媒体查询来调整视频的大小和位置。可以使用以下代码在视频宽度小于等于 480px 时将视频大小调整为 100%，并居中：

@media only screen and (max-width: 480px) {
  #myVideo {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

2.使用 Flexbox 布局将视频居中。可以将视频包装在一个容器中，并使用以下代码将容器设置为 Flexbox 布局：

#container {
  display: flex;
  align-items: center;
  justify-content: center;
}

3.使用 JavaScript 调整视频的大小和位置。使用以下代码获取视频的宽度和高度，并将其调整为屏幕大小的 50%：

const video = document.getElementById("myVideo");
const width = window.innerWidth * 0.5;
const height = window.innerHeight * 0.5;
video.style.width = width + "px";
video.style.height = height + "px";
video.style.margin = "0 auto";