0

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.

Tenzin Chhosphel
  • 9
  • 2
  • Whether it's fullscreen or not you should be able to change the `videoElement.src`. – StackSlave Jan 23 '18 at 00:22
  • Have you tried using `.requestFullScreen`? – guest271314 Jan 23 '18 at 00:29
  • 2
    Tenzin, could you please explain how the fact you're getting payed to resolve this issue is supposed to be an incentive for anyone to answer? I suggest removing *"This is for work."* from the question. It's irrelevant, at best. – tao Jan 23 '18 at 00:30
  • @PHPglue videoElement.src is not an option for what I'm trying to do. – Tenzin Chhosphel Jan 23 '18 at 17:39
  • @guest271314 when I switch from one video to another in fullscreen mode, the .requestFullScreen doesn't work because it requires a user interaction. But youtube.com playlist is somehow able to do it? – Tenzin Chhosphel Jan 23 '18 at 17:41
  • What do you mean by "switch from one video to another"? Can you create a stacksnippets to demonstrate? – guest271314 Jan 23 '18 at 17:42
  • @guest271314 When you watch a video from a youtube's playlist (https://www.youtube.com/watch?v=L3B1iSlY9cw&list=RDL3B1iSlY9cw), in fullscreen mode, and when you click on a another video in the playlist, the fullscreen mode is reserved. What I am essentially asking is: on a click of a video, how to load that video without losing fullscreen mode because once you reload the page with new url the fullscreen mode from .requestFullScreen is lost. The click event from the user is no longer registered when page refreshers. – Tenzin Chhosphel Jan 23 '18 at 18:36
  • Is the question specific to *uotube? Or are you using ` – guest271314 Jan 23 '18 at 18:50
  • @guest271314 I'm using – Tenzin Chhosphel Jan 23 '18 at 21:46
  • How does the user change change video sources when the video is full screen? Or, are you trying to stream multiple videos in succession without user action? – guest271314 Jan 23 '18 at 21:47
  • @guest271314 In fullscreen mode there is a playlist of videos. While watching a video, user can click on an another video, and that exits the fullscreen, but I want to persist the fullscreen mode. – Tenzin Chhosphel Jan 23 '18 at 23:17
  • How does the user click on another video while in fullscreen mode? – guest271314 Jan 23 '18 at 23:18
  • On fullscreen there is a playlist of videos, you can click any of them. Play this on youtube in fullscreen mode, and click on navbar, and you'll see a list of videos on the playlist: https://www.youtube.com/watch?v=L3B1iSlY9cw&list=RDL3B1iSlY9cw – Tenzin Chhosphel Jan 25 '18 at 01:07

1 Answers1

1

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.

Koert van Kleef
  • 772
  • 9
  • 17