JSFiddle - React, Tailwind, and code Playground

by roadrash

HTML

<script src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<div style="margin-bottom: 20px">
    <a class="highslide" href="http://www.youtube.com/embed/90DZeTMf1FA?rel=0&amp;wmode=transparent" onclick="return hs.htmlExpand(this, videoOptions)">
        Open video
    </a>
</div>

<div style="margin-bottom: 20px">
    <a class="highslide" href="http://fiddle.jshell.net/roadrash/7AHX9/show/light/" onclick="return hs.htmlExpand(this, iframeOptions)">
        Open iframe popup
    </a>
</div>

<div style="margin-bottom: 20px">
    <a class="highslide" href="http://placehold.it/800x1000&text=Large+image" onclick="return hs.expand(this, imageOptions)">
        <img src="http://placehold.it/150x150&text=Thumbnail" alt="Caption text" />
    </a>
</div>

CSS

/* Extra small devices (phones, less than 768px) */
@media screen and (max-width: 767px) {
    .video .highslide-html-content {
        width: 560px;
        height: 315px;
    }
}

/* Small devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
    .video .highslide-html-content {
        width: 640px;
        height: 360px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
    .video .highslide-html-content {
        width: 853px;
        height: 480px;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
    .video .highslide-html-content {
        width: 1100px;
        height: 619px;
    }
}

JavaScript

// different popups in on page

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.align = 'center';
hs.outlineType = 'rounded-white';

// close button for images
hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	fade: 2 // fading the semi-transparent overlay looks bad in IE
});

// autoload video
hs.addEventListener(window, "load", function () {
    hs.htmlExpand(null, {
        objectType: 'iframe',
        outlineType: 'rounded-white',
        src: 'http://www.youtube.com/embed/90DZeTMf1FA?rel=0&amp;wmode=transparent',
        numberPostion: 0,
        wrapperClassName: 'video draggable-header',
        objectLoadTime: 'after',
        allowSizeReduction: false,
        dimmingOpacity: 0.75
    });
});

// video popups 
var videoOptions = {
    objectType: 'iframe',
    outlineType: 'rounded-white',
    wrapperClassName: 'video draggable-header',
    objectLoadTime: 'after',
    allowSizeReduction: false,
    dimmingOpacity: 0.75
};

// iframe popups
var iframeOptions = {
    objectType: 'iframe',
    outlineType: 'rounded-white',
    numberPostion: 0,
    wrapperClassName: 'draggable-header',
    dimmingOpacity: 0.75
};

// image popups
var imageOptions = {
    outlineType: 'rounded-white',
    numberPostion: 'caption',
    captionEval: 'this.thumb.alt'
};