// index.js
const video = document.querySelector(".video");

function fullScreen() {
  video.requestFullscreen().catch((err) => console.log(err));
}

works perfectly fine on desktop browsers and Android, but on iOS it returns

video.requestFullscreen is not a function

How to programmatically enter the video in full-screen mode on iOS?

// index.js
const video = document.querySelector(".video");

function fullScreen() {
  video.requestFullscreen().catch((err) => console.log(err));
}

works perfectly fine on desktop browsers and Android, but on iOS it returns

video.requestFullscreen is not a function

How to programmatically enter the video in full-screen mode on iOS?

• javascript
• ios
• safari

1 Answer 1

Extend the function like so:

function fullScreen() {
  if (video.requestFullscreen) { video.requestFullscreen(); }
  else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); }
  else if (video.webkitEnterFullscreen) { video.webkitEnterFullscreen(); }
  else { console.log('Fullscreen API not supported'); }
}