<embed-video data-riot-tag>
    <div class="embed-responsive embed-responsive-16by9 mt3 mb3">
        <video class="embed-responsive-item video-js vjs-default-skin" width="100%" height="100%" poster="{poster}">
            <source src="{src}" type="{type}">
        </video>
    </div>
    <script>
    var self = this;

    self.on('mount', function() {
        initEmbedVideo(this);
        self = this;
        videojs($(this.root).find('video')[0], {
        	constrols: true,
        }).ready(function() {
        	// HACK?
        	$(self.root).find('video').parent().removeClass('vjs-controls-disabled');

        // play, pause video on element click
            $(self.root).find('.vjs-poster').on('click', function(event) {
                event.preventDefault();
                var video = $(self.root).find('video')[0];
                if (video.paused) {
                video.play();
                } else {
                video.pause();
                }
            });
        });
    });

    function initEmbedVideo(self) {
        var $el = $(self.root);
        var id = $el.attr('data-video-id');
        var format = $el.attr('data-video-format');
        var poster = $el.attr('data-video-poster') || $el.attr('data-poster') || '/FURL/imagecache/scalefit-860x575@as=1@qa=85/data/shared/web/assets/videos/master_thumbs/' + id + '.jpg';
        var src = $el.attr('data-video-src') || $el.attr('data-src');

        if(!format && src.indexOf('.mp4') > -1) {
            format = 'mp4';
        } else if(!format && src.indexOf('.m3u8') > -1) {
            format = 'application/x-mpegURL';
        }

        self.id = id;
        self.type = format == 'mp4' ? 'video/mp4' : format;
        self.poster = poster;
        if (format == 'mp4' && src.indexOf('http') == -1) {
            self.src = 'https://videos.ondemandhosting.info/videos' + src;
        } else {
            self.src = src;
        }

        self.update();
    }
    </script>
</embed-video>