Mark Thomas Miller

Creating a YouTube popup/overlay with jQuery

Every once and a while, I need to create a button that toggles a video overlay. I wrote this post as a reference. Click this button to see what you’re about to create:

The Controls

Give the class playVideo to the element that toggles your video’s appearance. You can give this class to as many elements as you’d like.

<button class="playVideo">ACTIVATE!</button>

The Video HTML

Add the following HTML to your page:

<div id="popupContainer" class="fullscreen" style="display:none;">
    <div class="popupBackground fullscreen"></div>
    <div class="video">
        <iframe 
         id="player" 
         width="853" 
         height="480" 
         src="https://www.youtube.com/embed/EsYHn8sQADs?rel=0&amp;enablejsapi=1"
         frameborder="0" 
         allowfullscreen>
         </iframe>
    </div>
</div>

Only change the red part of the URL. This is the key you’re looking for:

https://www.youtube.com/watch?v=EsYHn8sQADs

?rel=0&amp;enablejsapi=1 allows us to hide YouTube’s related videos after your video is over, and it enables automatic playing and pausing when the video is toggled, which gives the user a nice experience. (*blows smoke off of UX pistols*)

The JavaSript (jQuery)

Make sure jQuery is active on your page (I recommend hosting it from a CDN1). Then, put the following code inside <script> tags.

/*
    Toggles popup when clicking anything with the class 
    'playVideo', and closes it when clicking the page 
    behind it.
*/

$(".playVideo, .popupBackground").bind("click", function() {
 
    var jqPopup = $("#popupContainer"); // jQuery
    var jsPopup = popupContainer;       // JavaScript

    // toggle the popup's visibility
    jqPopup.toggle();
 
    // assign playback control
    var func = !jqPopup.is(':visible') ? 'pauseVideo' : 'playVideo';
 
    // send request through iframe to play or pause the video
    var iframe = jsPopup.getElementsByTagName("iframe")[0].contentWindow;
    iframe.postMessage(
        '{"event":"command","func":"' + func + '","args":""}', '*'
    );
 
});

This code helps us toggle the video on and off.2 It waits for the user to click an element with the playVideo class (which we defined in the first section of this tutorial) and then it displays and plays the video. It will also hide (and pause) the video when the user clicks back to the page.

The CSS

The following CSS makes the viewing experience much more enjoyable by centering the video and adding a dark, slightly transparent overlay to the page.

#popupContainer {
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -webkit-justify-content: center;
    align-items: center;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}

.fullscreen {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.popupBackground {
    background: rgba(0,0,0,.77);
}

.video {
    border: 1px solid #222;
    box-shadow: 0 10px 20px rgba(0,0,0,0.6), 0 20px 40px rgba(0,0,0,0.3);
    z-index: 1;
}

A Complete Example

All together, the code looks like this:

<button class="playVideo">ACTIVATE!</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
#popupContainer {
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -webkit-justify-content: center;
    align-items: center;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}

.fullscreen {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.popupBackground {
    background: rgba(0,0,0,.77);
}

.video {
    border: 1px solid #222;
    box-shadow: 0 10px 20px rgba(0,0,0,0.6), 0 20px 40px rgba(0,0,0,0.3);
    z-index: 1;
}
</style>

<div id="popupContainer" class="fullscreen" style="display:none;">
    <div class="popupBackground fullscreen"></div>
        <div class="video">
            <iframe 
             id="player" 
             width="853" 
             height="480" 
             src="https://www.youtube.com/embed/EsYHn8sQADs?rel=0&amp;enablejsapi=1"
             frameborder="0" 
             allowfullscreen>
        </iframe>
    </div>
</div>

<script>
/*
    Toggles popup when clicking anything with the class 
    'playVideo', and closes it when clicking the page 
    behind it.
*/

$(".playVideo, .popupBackground").bind("click", function() {
 
    var jqPopup = $("#popupContainer"); // jQuery
    var jsPopup = popupContainer;       // JavaScript

    // toggle the popup's visibility
    jqPopup.toggle();
 
    // assign playback control
    var func = !jqPopup.is(':visible') ? 'pauseVideo' : 'playVideo';
 
    // send request through iframe to play or pause the video
    var iframe = jsPopup.getElementsByTagName("iframe")[0].contentWindow;
    iframe.postMessage(
        '{"event":"command","func":"' + func + '","args":""}', '*'
    );
 
});
</script>

Again, you can see an interactive example at the top of this post.

Footnotes

  1. There’s a good argument as to why you should host jQuery on a CDN.
  2. If you know a better way to write this, message me at m @ this domain. I would reward you with a cookie or something, but the post office yelled at me the last time I tried to send one in an envelope. Live and learn.