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">
    <!-- Button HTML (to Trigger Modal) --><a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Video Modal</a>
    <!-- Modal HTML -->
    <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">
<!-- Optional theme -->
<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>
<!-- Latest compiled and minified JavaScript -->
<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.