HTML5 Video Element Fullscreen guide on Mobile Safari
I've spent hours debugging this and I've been struggling with this for a few days now and could really use some help. I'm working with a frustrating scenario with the HTML5 `<video>` tag not going fullscreen on Mobile Safari (iOS 16)... When I attempt to trigger fullscreen via JavaScript using the `requestFullscreen()` method, it doesn't seem to work at all. Instead, I get an behavior in the console that says, "Element is not in fullscreen mode" even though I've initiated the request right after the user clicks a button. Here's the relevant portion of my code: ```html <video id='myVideo' width='640' height='360' controls> <source src='movie.mp4' type='video/mp4'> Your browser does not support the video tag. </video> <button id='fullscreenBtn'>Go Fullscreen</button> ``` ```javascript const video = document.getElementById('myVideo'); const button = document.getElementById('fullscreenBtn'); button.addEventListener('click', () => { if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.webkitRequestFullscreen) { // Safari video.webkitRequestFullscreen(); } else if (video.mozRequestFullScreen) { video.mozRequestFullScreen(); } else if (video.msRequestFullscreen) { video.msRequestFullscreen(); } }); ``` I've confirmed that the button click correctly registers and triggers the appropriate method, but nothing happens on the video element. I also tried wrapping the request call in a `setTimeout()` with a slight delay, thinking it might be a timing scenario with the event loop, but that changed nothing. Additionally, I've made sure that the `<video>` element is playing before attempting to go fullscreen, as I read that it must be in a state where it can be fullscreened. I also checked the permissions settings on my device, and there's no restriction on fullscreen requests. Is fullscreen functionality limited or different in Mobile Safari, or is there something I'm missing in my implementation? This is part of a larger application I'm building. What am I doing wrong? This is part of a larger API I'm building. This issue appeared after updating to Html 3.9. Has anyone else encountered this?