How to use Bootstrap modal for YouTube videos and play automatically ?

The task is to use modal for YouTube videos in Bootstrap. Here we will discuss two topics, embedding YouTube video in Bootstrap modal and make YouTube video auto-play in the Bootstrap modal. Embedding YouTube videos in the Bootstrap modal is very easy and simple to implement using the below approach. But there is a small problem when you close the modal the video will continue playing in the background.

Approach:

  • First, copy the code to embed the video from YouTube site.
  • Then, put the code inside the .modal-body element.
  • To stop video automatically when you close the modal, toggle the URL value of YouTube’s video iframe src attribute dynamically using the jQuery.

Below examples implements the above approach:

Example 1: This example implements how to Embed YouTube video in Bootstrap modal but not playing automatically.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <title>
        Embedding YouTube video in Bootstrap modal
    </title>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <style>
        .bs-example {
            margin: 20px;
        }
          
        .modal-content iframe {
            margin: 0 auto;
            display: block;
        }
    </style>
    <script>
        $(document).ready(function() {
            var url = $("#Geeks3").attr('src');
            $("#Geeks2").on('hide.bs.modal', function() {
                $("#Geeks3").attr('src', '');
            });
            $("#Geeks2").on('show.bs.modal', function() {
                $("#Geeks3").attr('src', url);
            });
        });
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green">  
        GeeksforGeeks  
    </h1>
  
        <h3>  
        How to embed YouTube video in Bootstrap modal?
    </h3>
        <div class="bs-example">
            <a href="#Geeks2" 
               class="btn btn-lg btn-primary" 
               data-toggle="modal">Launch Modal</a>
  
            <div id="Geeks2" 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">GeeksforGeeks</h4>
                        </div>
                        <div class="modal-body">
                            <iframe id="Geeks3" width="450" height="350"
                                    src=
                                    frameborder="0" allowfullscreen>
                            </iframe>
                        </div>
                    </div>
                </div>
          </div>
      </div>
    </center>
</body>
  
</html>

chevron_right


Output:



Example 2: This example implements how to Autoplay YouTube video inside Bootstrap modal. To make YouTube video auto-play in the Bootstrap modal we have to place ?autoplay=1 after the attached Youtube’s source file.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <title>
        Embedding YouTube video in Bootstrap modal
    </title>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <style>
        .bs-example {
            margin: 20px;
        }
          
        .modal-content iframe {
            margin: 0 auto;
            display: block;
        }
    </style>
    <script>
        $(document).ready(function() {
            var url = $("#Geeks3").attr('src');
            $("#Geeks2").on('hide.bs.modal', function() {
                $("#Geeks3").attr('src', '');
            });
            $("#Geeks2").on('show.bs.modal', function() {
                $("#Geeks3").attr('src', url);
            });
        });
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green"
        GeeksforGeeks 
    </h1>
  
        <h3
        How to embed YouTube video in Bootstrap modal?
    </h3>
        <div class="bs-example">
            <a href="#Geeks2"
            class="btn btn-lg btn-primary"
            data-toggle="modal">Launch Modal</a>
  
            <div id="Geeks2" 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">GeeksforGeeks</h4>
                        </div>
                        <div class="modal-body">
                            <iframe id="Geeks3" width="450" height="350"
                                    src=
                                    frameborder="0" allowfullscreen>
                            </iframe>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    </center>
</body>
  
</html>                    

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Small things always make you to think big

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.