5

For youtube videos you there is a button to exit fullscreen for both the Flash and HTML5 versions. Is there a way to programmatically exit fullscreen on video complete using Javascript? So basically once the video ends I want it to exit fullscreen mode.

ski760
  • 151
  • 2
  • 14
  • What library/framework will be used for embeding videos? Give us more details. I'd suggest [MediaElement.js](http://mediaelementjs.com/) – Nicolae Olariu Feb 07 '14 at 14:52
  • I'm just using the youtube API. I'm not seeing a way to do this in the youtube api documentation. – ski760 Feb 07 '14 at 15:04
  • I think it's not possible for the moment as posted [here](https://code.google.com/p/gdata-issues/issues/detail?id=5710). – Nicolae Olariu Feb 07 '14 at 15:14

2 Answers2

4

What you need is the following: document.exitFullscreen()

Here you can read more about the Fullscreen API

Marcell Kiss
  • 538
  • 3
  • 11
3

The short answer, is NO. At the moment, there is no way to programatically exit from Youtube player 100% safe, But there is a workaround that IS 100% safe.

Basically what you need to do is follow a series of simple steps and it will work fine in ALL browsers:

Step 1: Put your Youtube code inside an invisible DIV, lets say it is called "codeholder".

Step 2: Put a visible DIV as holder for the invisible DIV. This is where the code will go, let's say its called "ytPlayer".

Step 3: When the page loads, copy the invisible DIV into the visible DIV. This can be done for example as follows: 

document.getElementById('ytPlayer').innerHTML = document.getElementById('codeholder').innerHTML;

Step 4: I'm assuming you are using the Youtube API, so, when the YouTube.PlayerState.ENDED event is fired (or whenever you want), copy the invisible DIV into the visible DIV. This will force the browser to close the player to close fullscreen and it will display the original player.

I like to do this on YouTube.PlayerState.ENDED event because this is a destructive way to close the player, so, the video will NOT continue playing after "exiting" full screen.

However, the Youtube API allows you to "read" the playing position, and you can restore the playing position easily with some light coding. There will be a pause of a fraction of a second though.

Shikkediel
  • 5,195
  • 16
  • 45
  • 77
Brian
  • 31
  • 2
  • Here's a demo, similar but same idea: [link](http://codepen.io/anon/pen/ORepGy?editors=0010) – Shikkediel Oct 30 '16 at 04:59
  • [Advanced version added](http://codepen.io/Shikkediel/pen/zKVRBJ?editors=0010), dealing with global scope among other things. – Shikkediel Nov 04 '16 at 05:48
  • Check this stackoverflow post. http://stackoverflow.com/questions/10706070/how-to-detect-when-a-page-exits-fullscreen – IamChandu Apr 10 '17 at 11:03