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

Check out this Author's contributed articles.

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.