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

CSS Framework Basics Build a Website with Bootstrap Adding the Video Modal and Footer

Jon Ryan
Jon Ryan
22,088 Points
Posted by Jon Ryan
Jon Ryan
22,088 Points

Adding the Video Modal - BUG (Framework Basics)

I noticed that when you open the video modal that, after pressing the play button on the video, if you close the modal without first pressing the pause button on the video, you continue to hear the video even though you cant see it. (I am using google chrome)

Has anyone else experienced and/or noticed this? and also, does anyone have or know of a fix.

1 Answer

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

I haven't been through this project before or have dealt with this situation so I can't give you a complete solution but I can try to get you started.

Is the video a youtube video loaded in an iframe?

The general process I think would be to write a handler for the modal closing event and then inside the handler you would need the javascript code to pause the video.

Check out the events for the modal section on this page:
http://getbootstrap.com/javascript/#modals

You'll see that there's a few events for a modal that's being closed. One when the closing starts hide.bs.modal and the other when all transitions are complete and it's fully hidden hidden.bs.modal. They also show setting up an example handler.

You can start with this: (change the id to your modal id)

$('#myModal').on('hide.bs.modal', function (e) {
  // Put the code here that will pause a youtube video
// I think you will have to interact with the player api
});

I would use hide.bs.modal so you can pause the video right away so that it's not continuing to play while the modal is transitioning.

This link should get you familiar with what to do on the youtube side of this:
http://css-tricks.com/play-button-youtube-and-vimeo-api/

I think that the code on that page has more functionality than what you need here. So your code won't be as involved as that. You'll have to see what's the minimum you need just to pause a video.

I'm willing to try to help you implement it if you decide you want to do that. Either post back here or start a new thread if you get stuck on implementation details.