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>
<a href="#" onclick="return hs.htmlExpand(this, {width: 600})">Show HTML5 video</a>
<div class="highslide-maincontent">
<video width="600" controls class="highslide-video">
  <source src="http://roadrash.no/hs-support/mov_bbb.mp4" type="video/mp4">
  <source src="http/://roadrash.no/hs-support/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>(c) copyright 2008, Blender Foundation / <a href="http://www.bigbuckbunny.org">BigBuckBunny</a></p>
</div>
</div>

JavaScript

// open HTML5 video using Highslide mainconten

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.align = 'center';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header no-footer';
hs.dimmingOpacity = 0.75;

// stop the video when closing the expander - requires jQuery
hs.Expander.prototype.onAfterClose = function() {
$('.highslide-video').trigger('pause');
};