Disable YouTube video in AngularJS game in Bootstrap modal
I have a YouTube video embedded in the Bootstrap modulator. The problem is that when the user presses the mod button, it closes and the video continues to play. I am trying to add something where I can check if the modal is closed to stop the video. I tried to use $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>
+3
source to share
1 answer
For those 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 am looking for a modal closure
$('#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 trick is now the video url is the key to it all? Enablejsapi = 1 & version = 3 & playerapiid = ytplayer
+3
source to share