toggle videos in hero

Question

I am trying to have 2 different toggle videos as the hero. I will call them Video A and Video B. I want video A to autoplay on the homepage. I have a play button on video A. I want two things to happen when the play button is clicked:

1. hide Video A.
2. show video B.

I have successfully hidden Video A when the play button is clicked, but Video B is not visible (I can hear it playing, but cannot see it). I think it is a CSS problem, but am not sure.

Video B is too large to upload (I am using WordPress), so I have it as an iframe. Video A is within a video tag.

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";
}

Answer 1

when you hide video A also set video B visibility on true with