CodePen Embed - Play YouTube or Vimeo Video in Modal

<div class="container">
    <h1>Play YouTube or Vimeo Videos in Bootstrap 5 Modal</h1>
  

 <!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-bs-toggle="modal" data-src="https://www.youtube.com/embed/Jfrjeg26Cwk" data-bs-target="#myModal">
  Play Video 1 - autoplay
</button>
  
   <!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-bs-toggle="modal" data-src="https://www.youtube.com/embed/IP7uGKgJL8U" data-bs-target="#myModal">
  Play Video 2
</button>
  
  
   <!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-bs-toggle="modal" data-src="https://www.youtube.com/embed/A-twOC3W558" data-bs-target="#myModal">
  Play Video 3
</button>
  
  
     <!-- Button trigger modal -->
<button type="button" class="btn btn-primary video-btn" data-bs-toggle="modal" data-src="https://player.vimeo.com/video/58385453?badge=0" data-bs-target="#myModal">
  Play Vimeo Video
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      
      <div class="modal-body">
       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></span>
        </button>        
        <!-- 16:9 aspect ratio -->
<div class="ratio ratio-16x9">
  <iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always" allow="autoplay"></iframe>
</div>
        
        
      </div>

    </div>
  </div>
</div> 
  
  
  
</div>

body {margin:2rem;}

.modal-dialog {
      max-width: 800px;
      margin: 30px auto;
  }

.modal-body {
  position:relative;
  padding:0px;
}
.btn-close {
  position:absolute;
  right:-30px;
  top:0;
}

$(document).ready(function() {

// Gets the video src from the data-src on each button

var $videoSrc;  
$('.video-btn').click(function() {
    $videoSrc = $(this).data( "src" );
});
console.log($videoSrc);

  
  
// when the modal is opened autoplay it  
$('#myModal').on('shown.bs.modal', function (e) {
    
// set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
$("#video").attr('src',$videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0" ); 
})
  


// stop playing the youtube video when I close the modal
$('#myModal').on('hide.bs.modal', function (e) {
    // a poor man's stop video
    $("#video").attr('src',$videoSrc); 
}) 
    
    


  
  
// document ready  
});

This Pen is owned by Jacob Lett on CodePen.

See more by @JacobLett on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css

External CSS

External JavaScript