JSFiddle - React, Tailwind, and code Playground

HTML

<div><p>ふくは手のかっか楽長らを譜にくっつけ蚊ました。それでまだいいかげんなくましというみみずくだた。くたくただましんたはたすると野鼠の上手者のなかをはどうか勝手なたて、それなんてゴーシュであるられるんましだ。

    黙れすぎそれは猫にないまして毎晩の東のねどこ屋がなり第一皿げの演奏をしていんた。セロも一生けん命ぶっつけてくれう。片手は一弾きかっこうのようを弾いんでいたしだ。</p>
<p>
    From http://lipsum.sugutsukaeru.jp/index.cgi</p></div>

CSS

body {
      margin: 0;

    }
img{border:0;}
    #container {
		background: rgba(255, 255, 255, 0.3);
		padding: 10px;
		width:610px;
		font-family:helvetica;
		color: white;
		font-size: 14px;
		font-weight:normal;
	}
    a{color:white;border:0;}
	a:visited{color:white;}
    h1 {
      font-size: 72px;
      line-height: 12px;
      margin-left: 20px;
      font-weight: bold;
      font-style: italic;
      display: inline-block;
    }

    pre {
      border: 1px solid #ddd;
      background: rgb(238,238,238);
      background: rgba(238,238,238,0.5);
      font-size: 12px;
      padding: 5px 0 5px 10px;
      display: inline-block;
	  width: 600px;
    }
    pre#license {
      width: auto;
      margin: 0;
      padding: 10px;
    }
    pre#methods {
      width: auto;
      padding: 10px;
    }
	th {
	text-align:left;
	}
    pre a {
      color: #00f;
    }
    p {
      width: 100%;
	  margin:0;
    }
    header img {margin-top:10px;max-width:500px;height:50px;}
    h2{text-transform:uppercase;font-size:15px;letter-spacing:6px;margin-bottom:20px;margin-top:-10px;font-style:italic;font-family: Comic Sans MS, cursive;font-weight:100;-webkit-transform: rotate(-1deg);-moz-transform: rotate(-1deg); }

div{width:100%;height:100%; margin:0;padding:25%;background:#fff;opacity:0.3;font-weight:bold;color:red;}

JavaScript

/*
 * OKVideo by OKFocus v2.3.2
 * http://okfoc.us
 *
 * Copyright 2014, OKFocus
 * Licensed under the MIT license.
 *
 */

var player, OKEvents, options;

(function($) {

    "use strict";

    var BLANK_GIF = "data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D";
    $.okvideo = function(options) {

        // if the option var was just a string, turn it into an object
        if (typeof options !== 'object') options = {
            'video': options
        };

        var base = this;

        // kick things off
        base.init = function() {
            base.options = $.extend({}, $.okvideo.options, options);

            // support older versions of okvideo
            if (base.options.video === null) base.options.video = base.options.source;

            base.setOptions();

            var target = base.options.target || $('body');
            var position = target[0] == $('body')[0] ? 'fixed' : 'absolute';

            target.css({
                position: 'relative'
            });

            var zIndex = base.options.controls === 3 ? -999 : "auto";
            var mask = '<div id="okplayer-mask" style="position:' + position + ';left:0;top:0;overflow:hidden;z-index:-998;height:100%;width:100%;"></div>';

            if (OKEvents.utils.isMobile()) {
                target.append('<div id="okplayer" style="position:' + position + ';left:0;top:0;overflow:hidden;z-index:' + zIndex + ';height:100%;width:100%;"></div>');
            } else {
                if (base.options.controls === 3) {
                    target.append(mask)
                }
                if (base.options.adproof === 1) {
                    target.append('<div id="okplayer" style="position:' + position + ';left:-10%;top:-10%;overflow:hidden;z-index:' + zIndex + ';height:120%;width:120%;"></div>');
                } else {
                    target.append('<div id="okplayer" style="position:' + position + ';left:0;top:0;overflow:hidden;z-index:'...