我正在尝试将 2 个不同的切换视频作为英雄。我将它们称为视频 A 和视频 B。我希望视频 A 在主页上自动播放。我在视频 A 上有一个播放按钮。我希望在单击播放按钮时发生两件事：
- 隐藏视频 A。
- 显示视频 B。
单击播放按钮时，我已成功隐藏视频 A，但视频 B 不可见（我可以听到它在播放，但看不到它）。我认为这是一个 CSS 问题，但不确定。
视频 B 太大而无法上传（我使用的是 WordPress），所以我将它作为 iframe。视频 A 在视频标签内。
HTML：
<video playsinline autoplay muted loop id="poster-video" onclick="hideVid()">
<source src="video.mp4" type="video/mp4">
</video>
<div id="full-video" style="visibility:hidden" onclick="showVid()">
<iframe src="https://player.vimeo.com/video/?autoplay=1&loop=1&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
</iframe>
</div>
<div id="xbut">
<span style="cursor:pointer" onclick="hideVid();showVid()">
<div class="ctrbutton"><img src="play-button-dark.png">
</div>
</span>
</div>
CSS：
video {
object-fit: cover;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
js：
function showVid() {
document.getElementById("full-video").style.display = "block";
}
function hideVid() {
document.getElementById("poster-video").style.display = "none";
}