Closing a Youtube Video Container

Hi,

I hope someone can help me with some wisdom or a piece of custom code with a small problem I have with an Youtube Video in one Webflow site I built.

In my case I am using a Youtube Video Widget from Webflow which is embedded in div which acts as some sort of lightbox dark background.
My problem is, that, if the user closes this “video lightbox” while the video is still playing, then it keeps on playing resulting in a weird background sound that can be heard even though the video can not be seen anymore on the page.

I am using the standard Webflow Animation feature for opening and closing my custom lightbox. Unfortunately Webflow Animations don’t have any features to manipulate videoplayback, which is what I need.
The video should be paused when closing the lightbox div containter and not keep on playing.

Best regards,
Dusan


Here is my public share link: LINK
(how to access public share link)

Hi

share link, can solve with simple JS

Hi,

here is the website link:
https://preview.webflow.com/preview/elra?utm_medium=preview_link&utm_source=designer&utm_content=elra&preview=620f81d15bf69e415b4522b050d1c74b&mode=preview

image

Hi

Link not working, please check.

Hi,

Sorry, maybe this link will work:

Thanks!

Hi

Try this code.

$(document).ready(function() {
  	// set unique id to videoplayer for the Webflow video element
  	var src = $('.youtube-video-wrapper').find('iframe').attr('src');

  	// when object with class open-popup is clicked...
  	$('.button.video').click(function(e) {
  		e.preventDefault();
  		// change the src value of the video
  		$('.youtube-video-wrapper').find('iframe').attr('src', src);
  	});

  	// when object with class close-popup is clicked...
  	$('.lightbox-close-icon').click(function(e) {
  		e.preventDefault();
  		$('.youtube-video-wrapper').find('iframe').attr('src', '');
  	});
  });

A question I am curious about, how will you do the translations?

let me know if you need more help ping me on Discord “mati#9475”

Thanks Mati!

I will try out the js an see if it works.

Regarding translation I was planning to use weglot
But I also saw one example from Ran Segal on Youtube who showed how translation is done via Google translate.
So I am not sure which way to go.

Do you have any suggestions?

Regards,
Dusan

I try that js and seems its working on your code :slight_smile:

I did for this site and choose to do two-blocks for each section [EN\GE] and showing hiding depending on the user selection.

My client doesn’t want to spend more Weglot and want something more accurate than google.

thanks
let me know if you need more help ping me on Discord “mati#9475”

How can I make this work on the video modal that comes from clicking “high fives with Riste…”? I just cant get this to work whoever I try to follow instructions from :slight_smile: https://preview.webflow.com/preview/the-design-team?utm_medium=preview_link&utm_source=dashboard&utm_content=the-design-team&preview=3e595c330bf98703e485b41b296c6463&mode=preview

I have the same issue. Click the ‘WATCH TRAILER’ icon to see.

Please help.

https://mrrussel-studio.webflow.io/
Capture