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 class="highslide" href="https://onedrive.live.com/embed?cid=9D34766CA1B048A7&resid=9D34766CA1B048A7%21111&authkey=ANl75nVSKypocE8&em=2" 
    onclick="return hs.htmlExpand(this, pttViewer)" title="PowerPoint in Highside using embed function from Microsoft OpenDrive">
        PowerPoint in Highside using embed function from Microsoft OpenDrive
    </a>
</div>

CSS

.ppt-viewer .highslide-footer {
    display: none;
}
.ppt-viewer .highslide-html-content {
	padding: 0;
}
.ppt-viewer .highslide-html, .highslide-wrapper, .highslide-outline {
	background-color: #000;
}
.ppt-viewer .highslide-header {
    display: none;
}
.ppt-viewer .highslide-body {
    background: url(https://dl.dropboxusercontent.com/u/1081184/hstest/loader-icon.gif) no-repeat center center;
}

JavaScript

// Highslide iframe with OpenDrive's online PowerPoint app
// Use the url in the src from OpenDrive's embed code in the anchor's href

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

// options for the iframe popup
var pttViewer = {
    outlineType: 'rounded-black',
    objectType: 'iframe', 
    objectLoadTime: 'after', 
    align: 'center',
    dimmingOpacity: 0.6,
    width: 615, 
    objectWidth: 615, 
    objectHeight: 488,  
    wrapperClassName: 'ppt-viewer',
    allowWidthReduction: true
};

// close button in upper right corner
hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	fade: 2,
	useOnHtml: true
});