Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Can someone explain how you would get the video to stop playback after closing the modal window?

I'm not sure how this would be done. Any help would be much appreciated.

2 Answers

Konstantinos Pedarakis
Konstantinos Pedarakis
21,301 Points

hi Zack Rabie I know that your post is about 7 months old but I'll post a code that i made right now, solving your issue, just in case anybody else will end up with the same issue.

$(document).ready(function() {

  var url = $("#videoModal iframe").attr("src");
  $("#trig").on("click", function() {
    $("#videoModal iframe").attr("src", url);
  })

  $(".close").on("click", function() {
    $("#videoModal iframe").attr("src","");
  })

  $("#videoModal").on("hidden.bs.modal", function() {
    $("#videoModal iframe").attr("src", "");
  })
})

i' ll explain a bit... the first line just read and store the value of the attribute src into a variable url. then the #trig is the name of the id that triggers the modal to show (for example the id of your anchor tag), and then set the value on the src attribute to the value of the url variable. When the user hits the close button of modal, the code just set the value of the src attribute to nothing, so the video actually stops. Similarly, the last block of code does the same thing as close button, but does it when the user clicks anywhere else on the window and the modal window hide. When the modal is totally hidden, then again it sets the src attribute value to nothing.

Anthony Attard
Anthony Attard
43,915 Points

That feature is part of the default implementation in Bootstrap.