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 plete using Javascript? So basically once the video ends I want it to exit fullscreen mode.

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 plete using Javascript? So basically once the video ends I want it to exit fullscreen mode.

• javascript
• video
• youtube
• html5-video

Share Improve this question Follow asked Feb 7, 2014 at 14:45 ski760ski760 15122 silver badges1414 bronze badges 3

• What library/framework will be used for embeding videos? Give us more details. I'd suggest MediaElement.js – Nicolae Olariu Commented Feb 7, 2014 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 Commented Feb 7, 2014 at 15:04
• I think it's not possible for the moment as posted here. – Nicolae Olariu Commented Feb 7, 2014 at 15:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

Here you can read more about the Fullscreen API

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.