CODEWITHSUNDEEP
javascripthtmlvideoyoutubefullscreen
Tenzin Chhosphel
Tenzin Chhosphel

Reputation: 9

How to persist fullscreen mode in browser like youtube.com playlist does?

In youtube.com, when you play a playlist in fullscreen mode, the fullscreen persists when switching from one video to another in the playlist. I am trying to do the same in my website, where there is a playlist of videos, and user can watch in fullscreen mode, but a new video starts to play, the fullscreen doesn't persist.

I understand from Fullscreen API, there needs a user interaction to make the video fullscreen. But, then how the heck youtube.com is doing it?

Any help would be appreciated! Thanks.

Upvotes: 0

Views: 3343

Answers (1)

Koert van Kleef
Koert van Kleef

Reputation: 756

This is not a technical (in depth) answer but may help you as a general explanation. I'm currently looking into this exact problem for a product I'm working on.

The reason fullscreen mode does not persist in the scenario you describe is because switching video amounts to navigating to a different page.

This is by design, out of security considerations: "In addition, navigating to another page [...] while in fullscreen mode exits fullscreen mode as well." See: Fullscreen API

The trick, then, is to have the element that is in fullscreen be the thing that changes, thus not navigating to another page.

From what I gather, YouTube fullscreens the wrapper element for the videos, and the content of that element changes when you switch to a different video. But the page you are on stays the same. How YouTube manages to change the window.location without exiting fullscreen... I don't know unfortunately. But it has to have something to do with fullscreening only part of the page. Otherwise they would have circumvented the security considerations of the API. Doesn't sound like an approach that a devteam at Google could justify.

Upvotes: 1

Related Questions