How do I set a Vimeo video to play in fullscreen mode once the Play button is clicked?

Sharon picture Sharon · Apr 18, 2019 · Viewed 10.2k times · Source

My website has an embedded Vimeo video. It's embedded in a column which is about 1/3 the width of the screen; I want the user to automatically see it in fullscreen once they hit play.

The fullscreen button on the player works fine, but I'd like to bypass it so that the user automatically sees it in fullscreen mode without pressing fullscreen.

My current code is:

<iframe style="border: 5px solid #2a923d;" 
src="https://player.vimeo.com/video/xxxxxxxxx?autoplay=0&playsinline=false" 
width="640" 
height="200" 
allowfullscreen></iframe>

So I don't want it to autoplay; I want it to sit there nice and small until Play is hit, and then I want it to open up fullscreen and play.

What am I doing wrong?

Answer

Tommy Penner picture Tommy Penner · Apr 19, 2019

Using Vimeo tools alone, it's not possible to force the player fullscreen on play.

You might be able to use the Vimeo Player SDK to listen for a play event and then use the JS Fullscreen API to put it into fullscreen, maybe also utilizing a library like BigScreen, but I'm personally not sure how to connect those dots together.