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

JavaScript

Posted by Mike Portman
Mike Portman
8,335 Points

Video keeps playing when modal closes

Hey all. Only been coding for a few months and this is the first time having, or attempting, to have a video in a bootstrap modal. Main problem I cant fix is that when the modal closes the video is still playing to you can hear the audio.

Did lots of troubleshooting and tried a the jquery codes on here with no luck - https://stackoverflow.com/questions/2128535/stop-a-youtube-video-with-jquery

​Also asked on reddit and the answer didn't work either... https://www.reddit.com/r/learnprogramming/comments/9ar2vr/video_keeps_playing_when_modal_closes/

Thanks for any help. Hopefully it's not a noob error like syntax.

HTML

  <div class="btn-group">
    <button class="btn btn-link " data-target="#myModal" data-toggle="modal" type="button"><img src="images/sfbayyoutube.JPG" class="slidePhotos"> </button>
</div>


<div aria-hidden="true" aria-labelledby="modal-sample-label" class="modal theme-alt modal-center-vertical" id="myModal" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-sample-label">Dialog title</h4>
            </div>
            <div class="modal-body">
                <video controls="" id="video1" style="width: 100%; height: auto; margin:0 auto; frameborder:0;">
                    <source src="Videos/sfbayblues.mp4" type="video/mp4">
                    Your browser doesn't support HTML5 video tag.
                </video>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-info" data-dismiss="modal" type="button">Cancel</button>
            </div>
        </div>
    </div>
</div>

main.js

$("#video1").trigger("pause");

1 Answer

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

The guy on reddit did actually help you, I am just not sure you understood the answer.

Basically, when you are hiding the modal you are not stopping the video, because the video has been played and is simply being 'hidden' visually.

Bootstrap's reference for modal states that it has an hidden.bs.modal event for the modal, so target that event, and then pause the video.

https://getbootstrap.com/docs/4.0/components/modal/#events

Basically do something like this:

$('#myModal').on('hidden.bs.modal', function (e) {
 $("#video1").trigger("pause");
})

that may do the trick (you may have to play around with the syntax if you get errors, but logically that's how you would solve the problem.