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 = < 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.
<!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: