angularjstwitter-bootstrapbootstrap-modalvideo-embedding

Disable YouTube video in AngularJS playing in Bootstrap modal


I have a YouTube video embedded inside of a Bootstrap modal. The problem is that when the user click away from the modal, it closes and the video continues playing. I'm trying to add something where I can check if the modal is closed then to stop the video. I've tried using the $scope.$watch('videoModalone', but no luck.

          <div class="modal fade" id="videoModalone" ng-model="youtubeVideo">
                <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"></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>

Solution

  • For those that are interested this is how i got it working:

         <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"></h4>
                        </div>
                        <div class="modal-body">
                            <iframe width="550" height="350" src="http://www.youtube.com/embed/mwuPTI8AT7M?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0"></iframe>
                        </div>
                    </div>
                </div>
            </div>
    

    Then in my controllers i look for the modal closing

    $('#videoModalone').on('hide.bs.modal', function () {
        var outerDiv = document.getElementById("videoModalone");
        var youtubeIframe = outerDiv.getElementsByTagName("iframe")[0].contentWindow;
        youtubeIframe.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 
    });
    

    and this did the trick now the key to all this is the url to the video ?enablejsapi=1&version=3&playerapiid=ytplayer