JSFiddle - React, Tailwind, and code Playground

by dingen2010

HTML

<link rel="stylesheet" href="http://flash.flowplayer.org/media/css/plugins.css">
<link rel="stylesheet" href="http://flash.flowplayer.org/media/css/site.css">
<link rel="stylesheet" href="http://flash.flowplayer.org/media/css/syntax.css">
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js"></script>
<script src="http://releases.flowplayer.org/js/flowplayer.ipad-3.2.12.min.js"></script>
<div class="productImage"> <a style="display: block; width: 425px; height: 425px;" id="player" href="http://www.innovations.com.au/images/product/sumcode/video/BRTN-.mp4"><object width="100%" height="100%" id="player_api" name="player_api" data="http://www.innovations.com.au/swf/flowplayer-3.2.16.swf" type="application/x-shockwave-flash"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="quality" value="high"><param name="bgcolor" value="#000000"><param name="flashvars" value="config=%7B%22playlist%22%3A%5B%7B%22url%22%3A%22http%3A%2F%2Fwww.innovations.com.au%2Fimages%2Fproduct%2Fsumcode%2Fvideo%2FBRTN-.mp4%22%2C%22w%22%3A%22424%22%2C%22h%22%3A%22424%22%7D%5D%2C%22clip%22%3A%7B%22url%22%3A%22http%3A%2F%2Fwww.innovations.com.au%2Fimages%2Fproduct%2Fsumcode%2Fvideo%2FBRTN-.mp4%22%7D%2C%22plugins%22%3A%7B%22controls%22%3A%7B%22left%22%3A%2250pct%22%2C%22width%22%3A425%2C%22fullscreen%22%3Atrue%2C%22backgroundColor%22%3A%22%23cccddd%22%7D%7D%2C%22playerId%22%3A%22player%22%7D"></object></a>

    <input type="hidden" id="vwidth" value="424">
    <input type="hidden" id="vheight" value="424">
    <div class="prodimage" style="display: none;">
        <div class="ppic">
            <img alt="" height="424" width="424" src="/images/Product/portrait/medium/BRTN-.jpg">
        </div>
    </div>
    <input type="hidden" id="flvpath" value="http://www.innovations.com.au/images/product/sumcode/video/BRTN-.flv">
    <input type="hidden" id="mp4path"...

JavaScript

$("#fancybox-manual-c").html('Images');

    var ref = '';

    console.log('mp4 path', $("#mp4path").val());
    console.log('flv path', $("#flvpath").val());

    if (navigator.appVersion.indexOf("Mac") != -1) {
        ref = $("#flvpath").val();
    } else {
        var v = document.createElement('video');
        if (v.canPlayType && v.canPlayType('video/mp4').replace(/no/, '')) {
            ref = $("#mp4path").val();
        } else {
            ref = $("#flvpath").val();
        }
    }

    if ($('#player').html() == undefined) {
        var videowidth = 424;
        var videoheight = 424;
        var playerstr = "<a style='display: block; width: 425px; height: 425px;' id='player'></a>";
        if ($("#portraitvideo").val() == "True") {
            if (document.URL.indexOf('damart') == -1 && document.URL.indexOf('victoriahill') == -1) {
                videowidth = 326;

            } else {
                playerstr = "<a style='display: block; width: 425px; height: 572px;' id='player'></a>"
                videoheight = 572;
            }
        }

        playerstr += "<input type='hidden' id='vwidth' value=" + videowidth + ">";
        playerstr += "<input type='hidden' id='vheight' value=" + videoheight + ">";

        if ($(".ad-image-wrapper").html() != undefined) {

            $('.ad-image-wrapper').before(playerstr);
            $(".ad-image-wrapper").hide();
        } else {
            $(".prodimage").before(playerstr);
            $(".prodimage").hide();
        }
    }

    console.log('vid playing:', ref);
    $("#player").attr('href', ref);

    if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i)) {

        flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer.commercial-3.2.18.swf", {
            // custom properties "w" and "h" specify...