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.
html
<!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> |
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= <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> |
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
