Embed YouTube Videos On Bootstrap 4 Popup Modals With AutoPlay

Bootstrap 4 does not natively support embedding videos on its modal popup windows. Here is how to embed YouTube videos on modal windows.

Code from this Stack Overflow post has been modified for this tutorial.

Features

• Video will start playing once the modal window loads. This can be optionally turned off and made to play only when the user clicks the play button.
• Video will stop playing when the user closes the modal window by clicking outside, or using the close button.
• You can embed multiple videos in a page and use the same modal window to play all of them. Improves page load time. (See an example, checkout the video or the live website.)

HTML Markup

This is the code that would be part of your WordPress template.

// PHP
<?php
$video_url = 'https://www.youtube.com/watch?v=dM7qBpS-BOY';
parse_str(parse_url($video_url, PHP_URL_QUERY), $variables); // $variables['v'] will have the YouTube video ID after this
?>
 
// HTML
<a class="video" data-toggle="modal" data-target="#YoutubeModal" data-youtubeid="<?php echo $variables['v']; ?>">
  <img src="https://i.ytimg.com/vi/<?php echo $variables['v']; ?>/hqdefault.jpg" width="350" height="auto" />
</a>

Modal Window

This is the code for modal window. Refer to Modals in Bootstrap 4 for more details if you are not sure on how to use it.

Since modals are not used until the page is fully loaded and since there is javascript, this should preferably be loaded towards the footer of your page.

<!-- YouTube Modal Window -->
<div class="modal fade video-lightbox" id="YoutubeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 <div class="modal-dialog modal-lg">
  <div class="modal-content">
   <div class="modal-body"></div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
 
<script>
 jQuery(document).ready(function ($) {
  var $midlayer  = $('.modal-body'); 
  $('#YoutubeModal').on('show.bs.modal', function (event) {
   var $video  = $('a.video');
   var button  = $(event.relatedTarget);   // Button that triggered the modal
   var vid  = button.data('youtubeid');  // Extract info from data-youtubeid attributes
   var iframe  = '<iframe />';
   var url  = "//youtube.com/embed/"+vid+"?autoplay=1&autohide=1&modestbranding=1&rel=0&hd=1"; // To turn off Auto play, set autoplay=0
   var width_f = '100%';
   var height_f  = 400;
   var frameborder = 0;
   jQuery(iframe, {
    name: 'videoframe',
    id : 'videoframe',
    src : url,
    width :  width_f,
    height : height_f,
    frameborder: 0,
    class : 'youtube-player',
    type : 'text/html',
    allowfullscreen: true
   }).appendTo($midlayer);
  });
  $('#YoutubeModal').on('hide.bs.modal', function (e) {
   $('div.modal-body').html('');
  });
 });
</script>

Notes

• The id of the modal should be the same as data-target in the HTML.
• data-youtubeid should contain the ID of a YouTube video.
• I tried this on multiple websites where it almost worked perfectly. One website gave me the following two issues.
• The video width was not 100% of the modal width. Had to adjust var width_f in the script to get this right.
• On the same website, the video kept playing twice. Had to disable auto play to fix this. Set autoplay=0 in the script to do this. See the comment.

Make something beautiful!

Hello, I am Arun Basil Lal. Thank you for reading!

I am a WordPress product developer and creator of Image Attributes Pro. I am passionate about solving problems and travelling the world.