JSFiddle - React, Tailwind, and code Playground

by adamtsiopani

HTML

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<div class='blur'>
    <iframe id="player1" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <div class='overlay'></div>
</div>

CSS

.video-hotspot {
    display: none;
}

JavaScript

// Hotspot object
function Hotspot(options) {
    var self = this;
    this.end = false;
    this.start = 0;
    this.link = {
        active: false,
        pause: true
    };
    
    // overwrite defaults above with options
    $.extend(true, this, options);
    
    // create the link
    this.link.el = $('<a href="#" data-reveal-id="myModal" class="video-hotspot full">' + this.link.text + '</a>');
    console.log(this);
    
    // link click event
    this.link.el.on('click', function (event) {
        self.open(event);
    });
    
    // 
    this.player.addEvent('ready', function () {
        self.player.addEvent('playProgress', function (data, id) {
            $(document).trigger('hotspot.load', [data, id]);
        });
    });
    
    // initialise the hotspot
    this.init();
}

Hotspot.prototype = {
    // Initialise the Hotspot
    init: function () {
        var self = this;
        $(document).on('hotspot.load', function (event, data, id) {
            self.load(data, id);
        });
    },

    // Controls display of hotspot
    load: function (data, id) {
        //show hotspot
        if (data.seconds >= this.start && !this.link.active) {
            if(this.end === false || data.seconds <= this.end) {
                this.show();
            }
            this.link.active = true;
        //hide hotspot
        } else if (this.link.active && this.end !== false && data.seconds > this.end) {
            this.hide();
        }
    },
    
    // Fired on hotspot click
    open: function (event) {
        event.preventDefault();
        if(this.link.pause) {
            this.player.api("pause");
        }
    },
    
    // Show a hotspot
    show: function() {
        this.link.el.appendTo('body').fadeIn(300);
    },
    
    // Hide a hotspot
    hide: function() {
        this.link.el.fadeOut(200).detach();
        this.link.active = false;
    }
};

var iframe = $('#player1')[0],
    player = $f(iframe),
    obj = new Hotspot({
       ...