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">×</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>
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">×</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