Fullscreen not work on Safari

[DBDeveloper87]

I followed your tutorial to the latter, and even tried the original code file from the Github repo; however for some reason the full screen doesn't work on Safari either in macOS or on iOS iPad. It does work in Chrome and Firefox though.

[DBDeveloper87]

I got it to work finally but I had to insert the WebKit hooks. At the moment the keyboard now only works for requesting full screen but not to exit for the F key but esc works. To exit full screen in Chrome and Firefox, the f key works fine. Here's my modification to the toggleFullscreen function:

function toggleFullScreen() { if (document.fullscreenElement) { document.exitFullscreen(); } else if (videoContainer.webkitRequestFullscreen) { videoContainer.webkitRequestFullscreen(); } else { videoContainer.requestFullscreen() } }

[ayoisaiah]

Thanks a lot for this man. I don't have a Mac so I couldn't test in Safari unfortunately. I will add a note in the tutorial

[PabloGS]

Actually you also need to check differently if you are in Fullscreen, so it should be more like this:

function toggleFullScreen() { if (document.fullscreenElement) { document.exitFullscreen(); } else if (document.webkitFullscreenElement) { document.webkitExitFullscreen(); } else if (videoContainer.webkitRequestFullscreen) { videoContainer.webkitRequestFullscreen(); } else { videoContainer.requestFullscreen() } }

Works for me on Safari 14 for MacOS.

Source: https://www.w3schools.com/jsref/prop_document_fullscreenelement.asp

[DBDeveloper87]

Re-doing the tutorial as I'm getting back to this project in order to extend. Used the last comment's suggestion and it works fine.

[ayoisaiah]

Many thanks @PabloGS, I've updated the tutorial.