JSFiddle - React, Tailwind, and code Playground

by DIdac Montero

HTML

<script src="https://assets-immobilien.s3.amazonaws.com/colorbox/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="https://assets-immobilien.s3.amazonaws.com/colorbox/colorbox6.css">
<script src="https://clipnow-assets.s3.amazonaws.com/embedcode-utils.js"></script>
<h1>Example for embed code</h1>	
<a id="ex_didac" class='iframe embed-container' style="display : none;" href=""><canvas width="400" height="200"></canvas></a>

CSS

.embed-container {
    cursor:pointer;
    position: relative;
}
.embed-container div {
    background: url("https://clipnow-assets.s3.amazonaws.com/Play-Button.png") no-repeat 50% 50%;
    z-index: 10;
    position: absolute;
    top:0;
    left: 0;
}
.embed-container div:hover {
    background-color: rgba(0, 0, 0, 0.3);
}
.embed-container canvas {
    z-index: 0;
    position: absolute;
    top: 0;
    left:0;
}

JavaScript

setEmbedCode("ralf", "ex_didac", false);

function setEmbedCode(identity, nameOrExternal, isExternal) {
    $(".iframe").colorbox({
        iframe: true,
        width: '100%',
        height: '100%',
        maxWidth: 1280,
        maxHeight: 720
    });
    $.ajax({
        url: 'https://clip-api2.clipnow.com/rest/v1/tour?identity=' + identity + '&' + (isExternal ? 'externalID=' : 'name=') + nameOrExternal,
        dataType: 'jsonp',
        success: function (data) {
            if (data['type'] == "ITEM_NOT_FOUND") {
                alert("Item does not have Tour or item does not exist");
            } else if (data['iframe']) {
                $('#ex_didac').attr('href', data['iframe']);
                $('#ex_didac').show();
            }
            if (data['firstImage']) {
                $("<img>").on("load", function () {
                    var start = Date.now();
                    var canvas = $("canvas").get(0);
                    var ctx = canvas.getContext("2d");
                    var x = canvas.width;
                    var y = canvas.height;
                    var div = $("<div>").insertAfter(canvas).width(x + "px").height(y + "px");
                    draw(canvas, ctx, start, x, y, this);
                }).attr("src", data['firstImage']).get(0);
            }
        }
    });
}

function draw(canvas, ctx, start, x, y, img) {
    var animate = function () {
        var part = (Date.now() - start) / 50 % x;
        ctx.drawImage(img, part, -(y / 8), x, y + 2 * (y / 8));
        ctx.drawImage(img, part - x, -((y / 8)), x, y + 2 * (y / 8));
        requestAnimationFrame(animate, canvas);
    }
    animate();
};