Stream video in modal: how to pause on 'close'?

If a stream video is embedded in a modal / popup on a website, and the visitor clicked to play it, how do you pause it when the visitor clicks to close the modal?

On our site it keeps playing. (That’s because the modal still exists on the page and is hidden.)

Here is a guess at a JavaScript snippet. What attribute do I add in, below?

document.getElementById( 'my-modal-close-button').onClick = function(){
  document.getElementById( 'cloudflare-stream-video-1' ).setAttribute( ______, ________ );
}

May I ask if you’re using the SDK or?

The modal might also get closed when the user clicks’ outside of the “modal” area, or?

You’d have to call player.pause() if you’re using Stream Player as embeded.

I’ve went with the approach by having the onclick="Pauza()" on the HTML element of button for close → the button “Close” and the “x” button calling the function to pause the player on click.

But, my wouldn’t work when I click outside the modal area because it would behave the same as you describe, modal is hidden and not visible and the video still continues in the background.

Depending what modal you’re using, if Bootstrap, then we can make this with events catch when modal is hidden → hidden.bs.modal, source:

See my example below, it works in both cases:
a) because I modified my HTML on both buttons, the “x” and “close” call the pause method and video is paused
b) therefore if I click outside the modal area, video gets paused too calling the pause method when modal is hidden:

You can also combine to show the modal onload, which requires a bit different approach (my example shows modal on click of the button).

In my code, I’ve just rounded the iframe code around Bootstrap’s responsive div approach by it’s CSS class as in the example:

There is also other way around, if you cannot modify your HTML, then we’d have to make sure again:
a) onclick of the button with id “close” then call the pause
b) detect if modal is hidden call the pause

Helpful from the docs:

2 Likes

Excellent answer, thank you!

It works.

I converted your jQuery into vanilla JS and enclosed it within window.addEventListener( ‘load’, function(){… and am all set.

Amazing help, thank you

1 Like

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.