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

Last Updated : 27 Feb, 2020

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.

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <title> 
        Embedding YouTube video in Bootstrap modal 
    </title> 
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
    </script> 
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
    </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= 
 "https://www.youtube.com/embed/V5he1JXiQbg" 
                                    frameborder="0" allowfullscreen> 
                            </iframe> 
                        </div> 
                    </div> 
                </div> 
          </div> 
      </div> 
    </center> 
</body> 
  
</html> 

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.

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <title> 
        Embedding YouTube video in Bootstrap modal 
    </title> 
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
    </script> 
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
    </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= 
"https://www.youtube.com/embed/V5he1JXiQbg?autoplay=1"
                                    frameborder="0" allowfullscreen> 
                            </iframe> 
                        </div> 
                    </div> 
                </div> 
        </div> 
    </div> 
    </center> 
</body> 
  
</html>                     

Output:

My Personal Notes

Related Articles