Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Juan Perez
Juan Perez
Courses Plus Student 8,944 Points

How to stop video when the modal window is closed.

Hello all Treehouse friends,

I have a YouTube video inside a modal window and it plays fine. But when the video is playing and I close the modal window the video keeps playing on the background.

How can I make the video stop when I close the modal window?

Thanks in advance.

2 Answers

Juan Perez
Juan Perez
Courses Plus Student 8,944 Points

first I tried running a function in a onclick but it wasnt working for me.... then I realized that I had the iframe with the video and I wasnt working on the correct DOM so the snippet that did the magic was

<script type="text/javascript">
    $('.close').on('click', function() {
   //$('#video').stopVideo();
$('#video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');    
});
</script>

using the DOM of the youtube embed. I hope you understand my disorganized idea :P

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

What modal are you using?

I haven't implemented this before but I can try to help with the general idea.

You'll want to check the documentation for the modal you're using and look for an event that goes off when the modal is being closed. Then write an event handler for that event inside of which you'll put the code which pauses the youtube video.

I believe you'll have to use the youtube player api if this is an iframe embed: https://developers.google.com/youtube/iframe_api_reference#Playback_controls

If you're using flash then you'll have to use the youtube javascript player api.

This may help you too: http://css-tricks.com/play-button-youtube-and-vimeo-api/ although it contains more functionality than you require.

Juan Perez
Juan Perez
Courses Plus Student 8,944 Points

I used the example that they have here

Everything is working now. It was a head chopper for me though :P

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Ok, the first part of my answer about events was for a javascript based modal.

Even though the modal doesn't use js I don't think you can avoid it here in order to interact with the youtube video.

Are you using javascript/jQuery elsewhere on your site?

I think what you'll have to do now is have a click handler for that "X". Inside the click handler is where you'll have the youtube code to pause the video.

Were you specifically trying to avoid javascript when picking this modal? Or was that just what you happened to find?

I think it can still work out if you stick with this one just not sure how you feel about mixing javascript in with it since the whole point of this modal seems to be not using javascript.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I should have refreshed before commenting. I think you must have edited your comment?

Would you care to explain what you ended up doing? You don't have to post code or go into details but just the general idea if you don't mind so others can benefit.