I tried making the youtube embed video's right and left black borders using <iframe/>
to disappear but it still does not, and tried looping with loop=1
and does not loop either.
I wouldn't mind the video itself going off screen, preferably contained inside the screen without borders. I just want the visual itself to fully cover the screen and have the black borders on left and right to disappear, and also put it on loop as well.
What could I be doing wrong?
Here is the code:
.nonClickingContainer {
width: 100vw;
height: 100vh;
position: relative;
}
.catVideo {
height: calc(100vh + 50px);
width: 100%;
}
<div className="nonClickingContainer">
<iframe className="catVideo" width="100%" height="100%" src="https://www.youtube.com/embed/7WZPysRdP8A?autoplay=1&autohide=0&controls=0&modestbranding=1&rel=0&showinfo=0&disablekb=1&loop=1" frameborder="0" scrolling="no" allowfullscreen></iframe>
</div>