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">

CSS

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

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

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

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

JavaScript

// set width and height of HTML popup based on viewport width

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.align = 'center';
hs.outlineType = 'rounded-white';
hs.dimmingOpacity = 0.75;
//hs.allowHeightReduction = false;
hs.allowSizeReduction = false;
//hs.allowWidthReduction = false;

hs.addEventListener(window, "load", function () {
    hs.htmlExpand(null, {
        objectType: 'iframe',
        src: 'http://www.youtube.com/embed/90DZeTMf1FA?rel=0&amp;wmode=transparent',
        numberPostion: 0,
        wrapperClassName: 'draggable-header'
    });
});

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
});