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

2
votes

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?

1
vimeovimeo-player
What have you tried already? Can you provide details about your viewing environment -- platform, browser, etc.? For other StackOverflow users to help, you must provide as much information as possible, see How to Ask for guidance. – Tommy Penner
Hi Tommy, I've shown my attempt above. I'm not sure what else to try. I've tried changing "false" to "0", but that's all. I'm on MacOS on Safari, but other users on Windows with Chrome/Firefox/Safari are finding the same issue, so I don't think it's the environment that's the root of the issue. Thanks for your help. – Sharon
If you're using Wordpress, you can use a video popup plugin like this and then change the css to make the popup window go fullscreen. – clayRay
Have you tried requestFullscreen? developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API on the play event request fullscreen for the iframe or it's parent, and then change the iframe height and width to 100% – Lucas Steffen

1 Answers

1
votes

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.