Video keeps playing in the background after being dismiss with bootstrap

Question

Built a simple modal exercise and video continues to play after i dismiss it

<a data-toggle="modal" href="#videoModal"onClick="toggleVideo();">
    <img class="img-responsive img-circle" src="img/thumb_ben.jpg">
       </a>

 <div class="modal fade" id="videoModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onClick="toggleVideo('hide');">&times;</button>
            <h4 class="modal-title">Learn how to make this app!</h4>
          </div>
          <div class="modal-body">
            <iframe width="500" height="281" src="http://www.youtube.com/embed/hTf0CgRC1_Q" frameborder="0"></iframe>
          </div>
        </div>
      </div>
    </div>

Javascript

<script>
      function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementByClassName("modal-body");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
    }

    </script>

Answer 1 · 2014-12-31T02:59:41Z

December 31, 2014 2:59am

I was trying to figure where I placed this question I actually figured it out earlier today. Previously when I pressed the close button on the modal for the video it would continue to play, even when I clicked on the modal background. I came across this snippet of code after creating a new JS file and linking it to my html file

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

After that the code worked, but only when I pressed the close button on the modal so then I wrote this for the background

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

After seeing success with both I thought it was a tad silly to have the a function doing the exact same task so then I came to write this

/*Function built to take on search for youtube video in modal*/
function ytplayer() {
    $('#videoModal iframe').attr("src", $("#videoModal iframe").attr(
        "src"));
}  

/*Function shuts down video when dismiss button is toggled*/
$('.close').click(function() {
    $('#videoModal').hide();
    ytplayer();
});

/*Function shuts down video when modal background is toggled*/
$('#videoModal').on('hidden.bs.modal', function() {
    ytplayer();
});

Answer 2 · 2014-12-31T02:41:54Z

December 31, 2014 2:41am

Two issues:

Since there can be multiple classes and tags, getElement*s*ByClassName and getElementsByTagName both returns a list (array) of elements even if there's only one. You would target the first element using [0] like so:

              var div = document.getElementsByClassName("modal-body");
    var iframe = div[0].getElementsByTagName("iframe")[0].contentWindow;
    div[0].style.display = state == 'hide' ? 'none' : '';

To enable the events, play and pause, on the youtube video you have to add the enablejsapi=1 parameter to end of the url:

            <iframe width="500" height="281" src="http://www.youtube.com/embed/hTf0CgRC1_Q?enablejsapi=1" frameborder="0"></iframe>

Hope that helps!

Welcome to the Treehouse Community

Looking to learn something new?

Elijah Collins

Elijah Collins

Video keeps playing in the background after being dismiss with bootstrap

2 Answers

Elijah Collins

Elijah Collins

Kathy Wu

Kathy Wu