Stopping video when div is hidden

Design help Custom code
1

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)

2

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>
3

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
4

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

5

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

6

Perfect! Works! :slight_smile: Thanks so much!

7

@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!

8

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”

9

Thanks for the update!
It’s so odd though, it seems like it starts playing for a second, and then stops -
https://copilot-2020.webflow.io/
Any idea what might cause it?

Thank you!