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

General Discussion

Posted by ryanandrews
ryanandrews
7,822 Points

Bootstrap Video Modal will not Stop Playing!

I can't seem to get my videos to stop after closing the screen using the X or when I click out side of the modal window. It just keeps playing in the background.

<div class="modal fade" id="videoModalone">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">BC Winegrowers Series</h4>
          </div>
          <div class="modal-body">
            <iframe width="550" height="350" src="http://www.youtube.com/embed/mwuPTI8AT7M?rel=0" frameborder="0"></iframe>
          </div>
        </div>
      </div>
    </div>

Here is the javascript I found to help me but It is doing nothing for me.

$('#videoModalone').on('hide', function () {
    $('#video_player').stopVideo();
})

I think I might know the problem that I can't find my id for my video player....but I have no idea. Any help would be appreciated.

Thank you

Ryan

Mike Baxter
Mike Baxter
4,442 Points

Have you tried either of the following?

http://stackoverflow.com/questions/13799377/twitter-bootstrap-modal-stop-youtube-video

http://stackoverflow.com/questions/2128535/stop-a-youtube-video-with-jquery

6 Answers

Mike Baxter
Mike Baxter
4,442 Points

Alright, based on StackOverflow, it looks like on.("hide",) doesn't work. Maybe that's the root of the problem?

I managed to get something working off a Bootstrap template and the code you provided. It reloads the video (and therefore stops it), but doesn't pause it. If you want to pause it you'll have to try something else.

The below JavaScript (using jQuery) works in my test, using the code you provided above. You'll probably want to hook up the .click() listener to something other than the "close" class of the button.

Also, it sounds like you might be headed towards a video that auto plays? In that case you'll want to also modify the autoplay attribute in the iframe.

$('.close').click(function () {
  $('#videoModalone').hide();
  $('#videoModalone iframe').attr("src", jQuery("#videoModalone iframe").attr("src"));
});
Mike Baxter
Mike Baxter
4,442 Points

I learned something new today, I'm glad you posted the question!

Giuseppe Elia Brandi
.a{fill-rule:evenodd;}techdegree seal-36
Giuseppe Elia Brandi
Front End Web Development Techdegree Graduate 69,630 Points

Thanks Mike! You are a life saver.

ryanandrews
ryanandrews
7,822 Points
ryanandrews
ryanandrews
7,822 Points

Thank you for responding Mike. I have googled my problem and have come across these solutions but I will be honest that they are like latin to me. I was hoping someone might explain it to me in a little more detail, for example... Link #1 - this is what the solution is: 

jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() {
        jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src"));
});

I don't know if I am just supposed to write in exactly what they have or if I am supposed to "fill in the blanks" with my # or my src, or my iframe.

Link #2 -

$('#playerID').get(0).stopVideo();

I don't know how to find my "#playerID" for this example. I have tried tinkering with both these solutions and have come up with nothing. I was hoping someone might take the time to explain to me in detail each component of the answers. I seem to not know enough to solve this problem.

Thank you

Mike Baxter
Mike Baxter
4,442 Points

I'm not sure how Bootstrap handles video, that's why I only posted some resources rather than an answer. I've been building my own version of Bootstrap for fun/learning, so my guess (I'm about 80% certain of this) is the $('#playerID') translates to one of two things in your code:

  1. You could give the iframe (which is the video) the id of "playerID".
  2. You could call $('#videoModalone iframe') to reference the iframe in the video.

Basically the code reloads the iframe in order to stop the video. You need to hand jQuery the id for the iframe so it can reference it and change it's "src" attribute. That can be one of two ways, as enumerated above: either by accessing the iframe directly (option 1) or by accessing whatever div you have around the iframe and then grab the first iframe that belongs to that div, which I believe is what $('#videoModalone iframe') does (option 2).

ryanandrews
ryanandrews
7,822 Points
ryanandrews
ryanandrews
7,822 Points

haha I am glad you learned something new today Mike, so did I. Thank you for taking the time. I will try your suggestions and get back to you to see if they worked.

ryanandrews
ryanandrews
7,822 Points
ryanandrews
ryanandrews
7,822 Points

Mike,

everything works great. When I hit the "x" close, the video stops. Now I am just curious if you know how I might get the video to stop when I click anywhere outside of the video window? The video only stops when I hit the "x".

Mike Baxter
Mike Baxter
4,442 Points

Glad you got it working!

Mike Baxter
Mike Baxter
4,442 Points

Do you mind checking off the correct answer then? This will help anyone else who comes back looking for the solution to a similar problem.

Mike Baxter
Mike Baxter
4,442 Points
Mike Baxter
Mike Baxter
4,442 Points

Ryan,

I'm not sure what works best in the context of your site. You can use

$(document).click(function () {
    // Do something here
});

to trigger an event when the user clicks anything on the page.

However, that might not be best; it's really hard to say without knowing under what circumstances on your site you want the video to start and stop.

If you do wind up going with this $(document).click() method, it might be best to add an additional check to see if the thing is already hidden—if it's already hidden, no sense trying to get the iframe to reload and slow down your website/increase data consumption.

hamiltonofiyai
hamiltonofiyai
16,811 Points
hamiltonofiyai
hamiltonofiyai
16,811 Points

Thank you this really saved me!