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.

Retro Video Camera Youtube Videos

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 freelance WordPress developer with over a decade of experience. I am passionate about making things and traveling the world.

Divi WordPress Theme - My Review

Divi WordPress Theme
Divi is a WordPress theme that web designers do not want you to know. It comes with a drag-and-drop theme builder. You can build beautiful looking unique websites without touching a line of code. Just choose from one of the many pre-made layouts, or pick elements and arrange them any way you like.

Divi is every WordPress developer's wet dream. Surprise your clients with neat responsive websites and have fun building them.

Divi comes from Elegant Themes. If you enjoy building websites, you *need* an Elegant Themes membership. 87 beautiful themes and 5 plugins for the cost of less than a candy-bar each!


Note: I am an avid user of Divi myself and this is a honest review. I wouldn't recommend something that I do not personally find amazing.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Share With Friends

Email Stamp

Free Newsletter

Get my newest blog posts and insider tips. No more than a few emails a year.

Just enter your email address below and click Sign Up Now

Please enter all required fields
Correct invalid entries

You have Successfully Subscribed!