Youtube iFrame Keeps playing when Modal is closed

Design help Custom code
1

Hello All,

I currently have a site utilizing YouTube video embeds that are located in a custom modal. The issue I am running into is that when the modal is closed the video does not stop, and the audio continues to play. I’ve spent several hours researching this, and unfortunately I don’t understand JavaScript enough to figure this one out on my own.

The last solution I tried completely removed the iframe element which required a reload to play another video. It seems I just need to add a function to stop the video, or disconnect the iframe that is triggered by the modal being closed.

The Code I am using for the iframe lazy loader can be found here: https://codepen.io/tutsplus/pen/RRVRro

Read Only Link: Here
Webflow.io Link: Here

Any help would be appreciated.
Cheers

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

2

Have you read this?

3

Thanks for the reference, I don’t believe I stumbled across this particular article. There are a couple things that look promising that I’ll try to work through and hopefully not bugger it all up.

Almost everything I had found relied designs that didn’t seem to work with the lazy loader I’m using, which would have required me to essentially re-do that whole section which i’m not so inclined to do unless it’s absolutely necessary.

4

Thanks for getting back, I dont do scripts etc but I have read this issue a few times.
The poster says it fixed his issue so confident you can do it.
Think its a overriding setting to cover the whole page or site.
Let us all know how you get one.
Good luck.

5

So I feel like I found a viable solution, however I’m struggling to find the way to integrate this script into my current code.

This is my current script that is in the “Before /body tag”

<script>
( function() {
	var youtube = document.querySelectorAll( ".youtube" );
	for (var i = 0; i < youtube.length; i++) {
		var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
		var image = new Image();
				image.src = source;
				image.addEventListener( "load", function() {
					youtube[ i ].appendChild( image );
				}( i ) );
				youtube[i].addEventListener( "click", function() {
					var iframe = document.createElement( "iframe" );
							iframe.setAttribute( "frameborder", "0" );
							iframe.setAttribute( "allowfullscreen", "0" );
							iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
							this.innerHTML = "";
							this.appendChild( iframe );                       
				} );	
	};
} )();
</script>

What I Found that I am trying to add in is this:

$("#photos").on("hide",function(){
    var leg=$('.videoPlayer').attr("src");
    $('.videoPlayer').attr("src",leg);
});

Where #photos is the ID of the modal and .videoPlayer is the class of the iframe. Basically it refreshes the src attribute (and stops playing the video). So,

```
    $('#myStopClickButton').click(function(){
      $('.yvideo').each(function(){
        var el_src = $(this).attr("src");
        $(this).attr("src",el_src);
      });
    });
```

I tried adding this in as it’s own script right below the existing one, however I can’t seem to get it to do anything. I’m wondering if I need to create a div as an HTML Embed to act as my modal close button, however if I do that, that would force users to use the close button and if they click off of the modal the video would still play.

6

This is where I can’t help but I do hope the clever ones come to your rescue.
I will keep eye on the post.