HTML `<video>` with custom controls not responding to fullscreen toggle in Edge 18
I'm working on a project and hit a roadblock. I'm working on an HTML5 video player with custom controls, but I'm facing an issue where the fullscreen toggle for the video doesn't seem to work in Microsoft Edge 18. The player is built with basic HTML and CSS, and I’m using JavaScript to handle the custom controls. Whenever I click the fullscreen button, the video does not enter fullscreen mode; instead, it remains in its original size. I have tried using the `requestFullscreen` method but it does not seem to trigger any errors or warnings in the console, and the fullscreen change event is not firing either. Here's the relevant HTML and JavaScript code snippet: ```html <video id="myVideo" width="640" height="360" controls> <source src="my-video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <div class="custom-controls"> <button id="fullscreenBtn">Toggle Fullscreen</button> </div> ``` ```javascript const video = document.getElementById('myVideo'); const fullscreenBtn = document.getElementById('fullscreenBtn'); fullscreenBtn.addEventListener('click', () => { if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.webkitRequestFullscreen) { // Safari video.webkitRequestFullscreen(); } else if (video.msRequestFullscreen) { // IE11 video.msRequestFullscreen(); } }); ``` I’ve also ensured that the video is set to allow user interaction by testing on a clean Edge profile without extensions. However, this issue persists. I'm wondering if there are any known bugs in Edge 18 that could cause this behavior, or if there are additional steps I might be missing to properly trigger fullscreen mode. Any insights would be greatly appreciated! This is part of a larger CLI tool I'm building. Am I missing something obvious?