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.
- 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.
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 | Adding Youtube videos
- Pytube | Python library to download youtube videos
- How to Automatically Close Alerts using Twitter Bootstrap ?
- Bootstrap 4 | Modal
- What does .modal('dispose') do in Bootstrap 4 ?
- How to get the same behavior with confirm and bootstrap modal?
- How to configure modal width in Bootstrap?
- How to use modal closing event in Twitter Bootstrap ?
- How to handle the modal closing event in Twitter Bootstrap?
- How to scroll automatically to a particular element using JQuery?
- How to scroll automatically to the Bottom of the Page using jQuery?
- How to call a function automatically after waiting for some time using jQuery?
- Bulma | Modal
- Difference between bootstrap.css and bootstrap-theme.css
- Include Bootstrap in AngularJS using ng-bootstrap
- How to Align modal content box to center of any screen?
- HTML | Responsive Modal Login Form
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.