Streaming live at 10am (PST)

Stopping video when div is hidden

Hi everyone,

I need to have a video pop-up that autoplay when the div is shown and fully stops when hidden. It doesn’t matter to me if it’s done with a Video component or an embed, I just need to be able to control it… :wink:

Thank you! :slight_smile:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

This works. I no doubt found this solution on the forum and tweaked. There are some optional fade in / fade out action. This is working with the Webflow video element. This script is in my body custom code for the page concerned.

    <script>
  $(document).ready(function() {
  	// set unique id to videoplayer for the Webflow video element
  	var src = $('.video').children('iframe').attr('src');

  	// when object with class vid-open is clicked...
  	$('.vid-open1').click(function(e) {
  		e.preventDefault();
  		// change the src value of the video
  		$('.video').children('iframe').attr('src', src);
  		$('.vid-wrap').fadeIn();
			$('.vid-open1').fadeOut();
  	});

  	// when object with class close-vid is clicked...
  	$('.close-vid').click(function(e) {
  		e.preventDefault();
  		$('.video').children('iframe').attr('src', '');
  		$('.vid-wrap').fadeOut();
			$('.vid-open1').fadeIn();
  	});
  });
</script>

Hi @HammerOz, thanks for the suggestion!
Though it’s still not working unfortunately :frowning: Just to confirm, the unique ID of the video player currently in your script is just “video”? Where in the code exactly does it stops the video? I only see the fade in and out…

Thank you!

1 Like

Here is a demo. It will not function in preview mode. Live https://video-stop-demo.webflow.io/

The code stopping the video is as follows (setting the video source to null).
$('.video').children('iframe').attr('src', '');

https://preview.webflow.com/preview/video-stop-demo?utm_medium=preview_link&utm_source=designer&utm_content=video-stop-demo&preview=92266c32c000a73d85dfe7b76e0941ae&mode=preview

Oh also don’t forget the lightbox component handles video stop without custom code!

Perfect! Works! :slight_smile: Thanks so much!

@HammerOz, one more question if you don’t mind… Can I add something to the script to also start playing it? Not just make it stops when hidden? The autoplay feature in the Vimeo link doesn’t seem to work… Thanks again!

Ok I updated the shared project do that. Note the addition of +"&autoplay=1" to the var. I assume that has to be changed for vimeo to “autoplay=1”

Thanks for the update!
It’s so odd though, it seems like it starts playing for a second, and then stops -


Any idea what might cause it?

Thank you!