Auto-pause Vimeo video when exiting fullscreen

Design help Custom code
1

Hi!

I have been working on a project where I need to have a clean play button that when clicked enters fullscreen and starts playing video, then when exiting fullscreen video needs to automatically pause.

So far I have been able to use the play button to enter fullscreen and start playing the video, but now trying to figure out how to implement the second part - auto-pause video when exiting fullscreen.

Working with custom code is rather new for me, so any help is really appreciated. Thanks! :pray:

Code I’m using right now:

<script src="https://player.vimeo.com/api/player.js"></script>

<script>

var Webflow = Webflow || [];
Webflow.push(function () {
  // DOMready has fired
  // May now use jQuery and Webflow API
  
  var iframe = document.querySelector('iframe');
  var player = new Vimeo.Player(iframe);
  
  $('#btnPlay').click(function() {
  	player.play();
    player.requestFullscreen();
	});
  
});

</script>

Here is my site Read-Only: [LINK][1]

Published test page: LINK 2

2

hi @joonastagel changing state of element based on its position in browser window are done with Intersection Observer. Because you’r using jQuery you should find how to write Observer functionality in this language. Then read Vimeo documentation to see how to pause video programatically as adding / changing attributes etc.

3

Hi @Stan

Thanks for a response. I will research it.

Javascript and jQuery are not something I feel comfortable in, so it is a big challenge for me. What I need to figure out is how to capture exitFullscreen event and then use it to trigger player.pause(); function.

If anyone is keen on figuring this out I really appreciate it. If I manage to somehow solve it myself, will update the topic.