My website shows a video using video tag which worked perfectly until not long ago. The video is working but when pressing on full screen, the video is playing but the screen is black while the sound is still playing. The issue occurs only on iPhones with iOS 15 (using Safari and Chrome also).
Things I've tried:
-
I've tried playing the video directly with a URL to the actual file(to check its not codec issue) and it worked properly.
-
My video tag has 'position: absolute;' on it and I tried removing it(even though it breaks my layout) and that didn't work either.
-
Tried pausing the video immediately and playing it after the video loads.
-
Tried applying a background: white; or any non-transparent color to the video tag.
-
Tried removing auto play.
-
Tried to disable 'GPU process: Media' on safari settings just to check if that affects anything and it didnt.
This is the html:
<video data-test-id="long-video" #longVideo muted controls playsinline [class.d-none]="!isShortVideoHidden"
*ngIf="isPageLoaded" src="https://cdn1.someurl.com/videos/commercial_1.mp4"
type="video/mp4">
</video>
and the css(with the parent):
@media only screen and(min-width:992px) {
.fixed-video {
position: fixed;
z-index: 10000;
margin: auto;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: 0.4s;
video {
width: 80%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
}
}
Please tell me if you have struggled with this and know how to solve it. Thank you :)
