JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<div>
    <a class="highslide" href="http://www.facebook.com" onclick="return hs.htmlExpand(this, videoOptions)">
        Open YouTube video
    </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

// @media query for YouTube popups

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';

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