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

08 Aug, 2021
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.  
html
<!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.  
html
<!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:  
Supported Browser:
Google Chrome
Microsoft Edge
Firefox
Opera
Safari 
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
 
ysachin2314
Bootstrap-Misc
CSS-Misc
HTML-Misc
jQuery-Misc
Picked
Bootstrap
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to set Bootstrap Timepicker using datetimepicker library ?
Difference between Bootstrap 4 and Bootstrap 5
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
How to update Node.js and NPM to next version ?
How to insert spaces/tabs in text using HTML/CSS?