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