CODEWITHSUNDEEP
javascriptvideoyoutubehtml5-video
ski760
ski760

Reputation: 151

Can you have a youtube video exit fullscreen on video complete

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.

Upvotes: 5

Views: 3332

Answers (2)

Marcell Kiss
Marcell Kiss

Reputation: 556

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

Here you can read more about the Fullscreen API

Upvotes: 4

Brian
Brian

Reputation: 31

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.

Upvotes: 3

Related Questions