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.
- How to use modal closing event in Twitter Bootstrap ?
- Pytube | Python library to download youtube videos
- HTML | Adding Youtube videos
- How to get YouTube video data by using YouTube data API and PHP ?
- How to Automatically Close Alerts using Twitter Bootstrap ?
- How to get the same behavior with confirm and bootstrap modal?
- How to configure modal width in Bootstrap?
- Bootstrap 4 | Modal
- What does .modal('dispose') do in Bootstrap 4 ?
- How to handle the modal closing event in Twitter Bootstrap?
- How to open or close react-bootstrap modal pro-grammatically?
- How to change the position of modal close button in bootstrap?
- How to fit the image into modal popup using Bootstrap?
- Bootstrap 5 Modal
- 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?
- How to scroll automatically to a particular element using JQuery?
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.