Play Embedded YouTube Video in Modal Popup

This code allows you to play embedded YouTube videos in a Bootstrap modal popup. It uses YouTube’s Iframe API to ensure smooth playback and customization of player controls. By simply adding the desired YouTube video IDs and titles to the designated buttons, you can create an engaging video gallery that opens in an attractive modal popup.

With just a few lines of code, you can embed and play multiple YouTube videos with ease. The major functionalities of the script involve handling the modal popup, dynamically loading and playing videos, and pausing the video when the modal is closed.

Furthermore, the popup also includes a title, providing context for the video being played. If you click on the same video button multiple times, the video resumes from where it left off, offering a smooth user experience.

Whether you want to enhance your website’s user experience or showcase a portfolio of videos, this code will be a valuable tool to make your content stand out.

How to Play Embedded Youtube Video in Modal Popup

1. First of all, load the jQuery and Bootstrap Framework by adding the following CDN links into the head tag of your HTML document.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>

2. After that, create a Bootstrap modal component as follows:

<div class="wrapper">
  <div class="container">
    <div class="row mb-5">
      <div class="col text-center">
        <div class="h1 text-light">YouTube video in Bootstrap 3/4/5 Modal</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="card w-75 mx-auto">
          <button class="btn p-0 js-play" type="button" data-toggle="modal" data-target="#modalVideo" data-src="c7nRTF2SowQ" data-title="Официальный анонс-трейлер Battlefield 1"><img class="card-img-top" src="https://img.youtube.com/vi/c7nRTF2SowQ/maxresdefault.jpg" alt="Официальный анонс-трейлер Battlefield 1"/></button>
        </div>
      </div>
      <div class="col">
        <div class="card w-75 mx-auto">
          <button class="btn p-0 js-play" type="button" data-toggle="modal" data-target="#modalVideo" data-src="omWEZI0cT1g" data-title="DOOM - Fight Like Hell Cinematic Trailer"><img class="card-img-top" src="https://img.youtube.com/vi/omWEZI0cT1g/maxresdefault.jpg" alt="DOOM - Fight Like Hell Cinematic Trailer"/></button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="modalVideo">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title js-title-insert"></h5>
        <button class="close js-pause" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body px-0 py-0">
        <div class="embed-responsive embed-responsive-16by9">
          <div class="embed-responsive-item" id="youTubeIframe"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Add youtube api-->
<script src="https://www.youtube.com/iframe_api"></script>

3. Customize the wrapper element using CSS.

body {
  background-color: #563d7c;
}

.wrapper {
  padding: 30px 0;
}

4. Finally, add the following JavaScript function to your project to initialize the modal video player.

var player;
var lastButton = '';
const youtube = 'youTubeIframe';
const titleInsert = '.js-title-insert';
const btnPlay = '.js-play';
const btnPause = '.js-pause';
const modalId = '#modalVideo';
const videoQuality = 'hd720';

function onYouTubePlayerAPIReady() {
  player = new YT.Player(youtube, {
    controls: 2,
    iv_load_policy: 3,
    rel: 0,
    events: {
      onReady: onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  'use strict';
  $(btnPlay).on('click', function() {
    var videoId = $(this).attr('data-src');
    
    if (lastButton == videoId) {
      $(titleInsert).text($(this).attr('data-title'));
      player.playVideo(videoId, 0, videoQuality);
    } else {
      $(titleInsert).text($(this).attr('data-title'));
      player.loadVideoById(videoId, 0, videoQuality);
      lastButton = videoId;
    }
  });
  
  $(btnPause).on('click', function() {
    player.pauseVideo();
  });
  
  $(modalId).on('click', function() {
    player.pauseVideo();
  });
}

That’s all! hopefully, you have successfully integrated this code to play embedded YouTube video in Modal Popup. If you have any questions or suggestions, feel free to comment below.