modaal.js: How to Easily Display YouTube Videos in a Modal Window

This time, we will introduce how to use modaal.js to display multiple YouTube videos in a modal window. A modal window is a popup that appears on the screen when clicked. Below, we will explain in detail how to implement it step by step while covering the CSS, HTML, and JavaScript code.

CSS Description

First, load the stylesheet for modaal.js and configure the CSS to adjust the appearance of the modal window.
These are the CSS descriptions for the modal area (#modalarea), the modal display (.modaal-container) width, and the close button (.modaal-close).

<link rel="stylesheet" type="text/css" href="modaal.min.css">
<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding-top: 20px;
}
p{
  padding-bottom: 10px;
  font-size: 18px;
}
.modalarea{
  display: none;
}
.modaal-container{
  max-width: 90%;
  text-align: center;
}
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;  
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#333;
}
</style>

　
This CSS sets basic font sizes and text alignment and adjusts the modal window’s appearance.

HTML Description

Next, let’s take a look at the HTML markup. We will create links to display YouTube videos in a modal and the modal display areas.
We prepared two modal areas (class=”modalarea”) and two modal trigger links (class=”modal”).

<h1>Display Multiple YouTube Videos in a Modal Using modaal.js</h1>
<p>Click the links below to display YouTube embedded videos (iframe) in a modal window.</p>

<div><a href="#yt1" class="modal">Display YouTube Video in Modal 1</a></div>
<br>
<div><a href="#yt2" class="modal">Display YouTube Video in Modal 2</a></div>
  
<div id="yt1" class="modalarea"></div>
<div id="yt2" class="modalarea"></div>

　
This HTML code provides two modal display links, each of which displays its corresponding modal area when clicked.

JavaScript Description

Finally, we will use JavaScript to initialize modaal.js and implement the process of displaying YouTube videos in a modal window.
Load jquery.min.js (v1.11.2) and modaal.min.js. Write $(“modal trigger link class”).modaal({options}).
In the before_open option, obtain the modal target ID and embed the YouTube iframe into the modal area.
In the after_close process, delete the YouTube iframe from the modal area.

<script src="jquery.js"></script>
<script src="modaal.min.js"></script>
<script type="text/javascript">
$(function(){
  $(".modal").modaal({
    start_open:false,
    overlay_close:true,
    before_open:function(){ // Process when modal opens
      var ss = JSON.parse(JSON.stringify($(this).attr("scope"))).source;  // Get modal target ID
      // Insert appropriate YouTube iframe into modal area based on target ID
      if(ss == "#yt1"){
        $('#yt1').html('<iframe width="100%" height="490" src="https://www.youtube.com/embed/d5VXB-UxTiE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>');
      }else if(ss == "#yt2"){
        $('#yt2').html('<iframe width="100%" height="490" src="https://www.youtube.com/embed/yyCVaP2xhAU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>');
      }
      $('html').css('overflow-y','hidden');
    },
    after_close:function(){ // Process when modal closes
      $('#yt1,#yt2').html('');  // Remove YouTube iframe from modal area
      $('html').css('overflow-y','scroll');
    }
  });
});
</script>

　
This script loads jQuery and modaal.js, then sets up the modal window to appear when a link is clicked.
When the modal closes, it removes the embedded YouTube video and restores the scroll bar.

Demo Page: Display Multiple YouTube Videos in a Modal using modaal.js

We have provided a demo page where you can check the actual behavior. You can view it from the link below.

Demo Page: Display Multiple YouTube Videos in a Modal Using modaal.js

Reference page: modaal.js and jquery.cookie.js: How to Set the Re-display Interval for a Modal

Summary

In this article, we explained in detail how to display multiple YouTube videos in a modal window using modaal.js.
By setting styles with CSS, marking up with HTML, and implementing behavior with JavaScript, you can easily create modal windows.
Feel free to use this method in your own projects.

Using modal windows allows videos to be displayed without leaving the page, improving the user experience.
It can also be applied to other media content, making it highly versatile.

　
*If you reuse this code, please do so at your own risk.*
Do **not** reuse the Google Analytics tag in the demo page’s head section.