How to embed YouTube video in Bootstrap modal

Topic: Bootstrap / Less« Prev|Next »

Answer: Insert YouTube Code inside Modal Body

You can easily embed or place the YouTube video inside a Bootstrap modal like you do on the normal web pages. Just get the code to embed the video from YouTube site and place it inside the .modal-body element. But there is small problem; the YouTube video doesn't stop automatically when you close the modal window. It will still play in the background.

To solve this problem you can simply toggle the url value of the YouTube's video iframe src attribute dynamically using the jQuery. Here's an example:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>Insert YouTube Video in Bootstrap Modal</title>
  • <link rel="stylesheet" href="css/bootstrap.min.css">
  • <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  • <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  • <script src="js/bootstrap.min.js"></script>
  • <style type="text/css">
  •     .modal-content iframe{
  •         margin: 0 auto;
  •         display: block;
  •     }
  • </style>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     /* Get iframe src attribute value i.e. YouTube video url
  •     and store it in a variable */
  •     var url = $("#cartoonVideo").attr('src');
  •     
  •     /* Assign empty url value to the iframe src attribute when
  •     modal hide, which stop the video playing */
  •     $("#myModal").on('hide.bs.modal', function(){
  •         $("#cartoonVideo").attr('src', '');
  •     });
  •     
  •     /* Assign the initially stored url back to the iframe src
  •     attribute when modal is displayed again */
  •     $("#myModal").on('show.bs.modal', function(){
  •         $("#cartoonVideo").attr('src', url);
  •     });
  • });
  • </script>
  • </head>
  • <body>
  • <div class="bs-example">
  •     <!-- Button HTML (to Trigger Modal) -->
  •     <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>
  •     
  •     <!-- Modal HTML -->
  •     <div id="myModal" 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">&times;</button>
  •                     <h4 class="modal-title">YouTube Video</h4>
  •                 </div>
  •                 <div class="modal-body">
  •                     <iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
  •                 </div>
  •             </div>
  •         </div>
  •     </div>
  • </div>     
  • </body>
  • </html>

See the tutorial on HTML5 video to learn the various techniques of inserting videos on the web pages including YouTube videos.


Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.