JSFiddle - React, Tailwind, and code Playground

by srirams

HTML

<div id="box">
      In with this plugin, you can make any link trigger a popup. This is  
        youtube <a class="video1" href="#"> Click here to try me  </a>
    </div>

CSS

p { font-size: 12px; }

.ppy {
  align-content: center;
  height: 100px;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;      
}


#box
{
    height: 100px;
    width: 100%;
    background: #ccc;
    font-size: 48px;
    color: #000;
    text-align: center;
    margin-top: 20px;
    margin-left: 5px;
    vertical-align: middle;
    display: table-cell;
}


/*
 * jQuery Video Popup Plugin Stylesheet
 * Version: 1.0
 *
 * Author: Nick Rivers
 * http://nrivers.com
 *
 *
 * Changelog: 
 * Version: 1.0
 *
 */

#dvGlobalMask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1100;
	background-color:#3F3F3F;
}

#videopopup {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 5px 5px 20px #000000;
    display: none;
    padding-bottom: 5px;
	position: absolute;
    z-index: 9001;
	border: 15px solid #fff;
	position:relative;
}

.modalnav {
    cursor: pointer;
    height: 30px;
	width: 30px;
	position:absolute;
	right:-25px;
	top:-25px;
	background: url("http://nrivers.com/codecanyon/n1/images/modal-nav-hover.png") -40px 0px;
}

.modalnav:hover {
    background: url("http://nrivers.com/codecanyon/n1/images/modal-nav-hover.png") -40px 0px;
}

JavaScript

/* nrivers.com
http://nrivers.com/codecanyon/n1/ 
*/

jQuery.fn.videopopup = function (options) {
    var settings = {
        videoid: "",
        videoplayer: "youtube",
        width: "500px",
        height: "300px",
        autoplay: "false"
    };
    return this.each(function () {
        if (options) {
            $.extend(settings, options)
        }

        function centerS(cur) {
            var cur = cur;
            cur.css("position", "absolute");
            cur.css("top", ($(window).height() - cur.height()) / 2 + $(window).scrollTop() + "px");
            cur.css("left", ($(window).width() - cur.width()) / 2 + $(window).scrollLeft() + "px");
            return this
        }
        $(this).click(function (e) {
            var a = $(document).height();
            var b = $(window).width();
            e.preventDefault();
            var popuphtml = '<div id="dvGlobalMask"></div><div id="videopopup"><div class="modalnav"></div><div id="videocontent"></div></div>';
            $("body").append(popuphtml);
            $("#dvGlobalMask").css({
                width: b,
                height: a
            });
            $("#dvGlobalMask").fadeTo("fast", 0.4);
            $("#videopopup").css("width", settings.width);
            $("#videopopup").css("height", settings.height);
            centerS($("#videopopup"));
            var autoplay = 0;
            if (settings.autoplay == "true") {
                autoplay = 1
            } else {
                autoplay = 0
            }
            youtubestr = '<iframe width="' + settings.width + '" height="' + settings.height + '" src="http://www.youtube.com/embed/' + settings.videoid + "?autoplay=" + autoplay + '&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>';
            vimeostr = '<iframe src="http://player.vimeo.com/video/' + settings.videoid + "?color=00adef&amp;show_title=0&amp;show_portrait=0&amp;autoplay=" + autoplay + '" width="' + settings.width + '" height="' + settings.height...