I have a Bootstrap 3.3.7 modal window which contains a video using the HTML5 video tag, e.g.
<video controls autoplay>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The trouble with this is that when my web page loads, the video starts playing (even though it cannot be "seen" since the modal is closed, the audio also plays).
I understand that the autoplay tag is doing this. But how can I get the video to autoplay when the modal is loaded? And stop when the modal is closed?
I have a Bootstrap 3.3.7 modal window which contains a video using the HTML5 video tag, e.g.
<video controls autoplay>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The trouble with this is that when my web page loads, the video starts playing (even though it cannot be "seen" since the modal is closed, the audio also plays).
I understand that the autoplay tag is doing this. But how can I get the video to autoplay when the modal is loaded? And stop when the modal is closed?
3 Answers
Reset to default 13You can use the shown.bs.modal and hidden.bs.modal events to run some javascript code when the modal is shown/hidden:
$('#myModal').on('shown.bs.modal', function () {
$('#video1')[0].play();
})
$('#myModal').on('hidden.bs.modal', function () {
$('#video1')[0].pause();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<video controls id="video1" style="width: 100%; height: auto; margin:0 auto; frameborder:0;">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>You should use a javascript function to start the video and call it when the modal is loaded: (and remove the autoplay attribute ) Here is an example:
var vid = document.getElementById("myVideo");
function playVid() { vid.play(); }
strong text ×
run my snippet in the botonm
$(document).ready(function(){
autoPlayYouTubeModal();
//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
function autoPlayYouTubeModal() {
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-theVideo"),
videoSRCauto = videoSRC + "?autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
$('.modal').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
//video play on click
$('.video-player-main iframe')[0].contentWindow.postMessage('{func":"playVideo":""}', '*');
});
}
});.btn{margin-left:20%;margin-top:20%}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="video-player-wrapper">
<div class="video-player-main">
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal1" data-theVideo="https://www.youtube.com/embed/XsI9F3n-Bog">Open Model</a>
</div>
</div>
<div class="modal fade" id="videoModal1" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<iframe width="100%" height="350" src="" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>