Bootstrap Modal Popup Video

In many scenarios, we require a thumbnail to display on a page as an image and as we click on that image/link, we want that the related video should be played in the popup.

Here, we are playing a video on click of the link and playing that video in the bootstrap modal popup. The sample of the video can be seen as shown in the image below.

We have simply used HTML and jQuery along with the Bootstrap Modal to play the video.

HTML

<div class="bs-example">
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Video Modal</a>
<div id="myModal" class="modal fade">
<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">YouTube Video</h4>
</div>
<div class="modal-body"> <iframe id="cartoonVideo" autoplay width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe> </div>
</div>
</div>
</div>
</div>

Script

<script type="text/javascript">
$(document).ready(function() {
/* Get iframe src attribute value i.e. YouTube video url
and store it in a variable */
var url = $("#cartoonVideo").attr('src');
/* Assign empty url value to the iframe src attribute when
modal hide, which stop the video playing */
$("#myModal").on('hide.bs.modal', function() {
$("#cartoonVideo").attr('src', '');
});
/* Assign the initially stored url back to the iframe src
attribute when modal is displayed again */
$("#myModal").on('show.bs.modal', function() {
$("#cartoonVideo").attr('src', url);
});
});
</script>

External Reference

Here, I am directly taking reference from Bootstrap website, however, you can refer them locally.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Style

<style type="text/css">
.modal-content iframe {
margin: 0 auto;
display: block;
}
</style>

Kindly let me know if you face issues.

5 Comments

Join the conversation! Your thoughts help the community grow.

Evelina Racu5y ago
Hi! Instead of a button can you make the video modal open from an image? Please
Petrus Vermaak5y ago
Im trying to load the iframe responsive and full screen, can you please help!!!!! :D
Petrus Vermaak5y ago
Hi Surman,
Ligeiro Gonzales6y ago
Excellent job. I am testing on my Test Blog, as you can see here: https://serietahm.blogspot.com/2019/10/01-temporada.htmlHowever, I wanted to change that blue button. How I do? I use Blogger. In this case, I wanted to leave only text, instead of having a button. Or have both, whatever, but I really needed the text, when the user clicked, open the video, as is currently happening with the little blue button. I will give you an example, as in this blog: https://osociobrasil.blogspot.com/p/episodios-completos.html When you click "Assistir", it opens the video. I'm trying to do something similar, but it's too hard :( Anyway, thanks for your great contribution
arun sahani8y ago
I want this tobe included in my mvc5 application