JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<video src="vimeo" id="47191650" data-protocol="https" width="640" height="360" controls="1ab7ea"></video>

JavaScript

var videos = $('videos');
    
        videos.each(function() {
           
            var $this = $(this),
            source = $this.attr('src'),
            username = $this.attr('name'),
            video = $this.attr('id'),
            protocol = $this.data('protocol'),
            poster = $this.attr('poster'),
            color = $this.attr('controls'),
            width = $this.width(),
            height = $this.height(),
            url, src, params = {},
            settings = 'webkitAllowFullScreen mozallowfullscreen allowFullScreen frameborder="0"';
        
        var api = 'http://vimeo.com/api/v2/video/' + video + '.json';
        
        $.ajax({
            url: api       
        });
            
        if (source, video == undefined) {
            console.error('Please include the source (src) and video (id)');
            return;
        }
        
        if (protocol == undefined) {
            protocol = https;
        }
        
        if (username == undefined) {
            params['byline'] = 0;
        }
        
        if (poster == undefined || poster == 0) {
            params['portrait'] = 0;
        }
        
        if (color == undefined) {
            color = '1ab7ea';
        }
        
        params['color'] = color;
        params['api'] = '1';
        
        params = $.param(params);
        
        if (source == 'vimeo') {
            url = 'player.vimeo.com/video/' + video;
            
            $this
                .wrap('<div class="video-container">')
                .after('<iframe ' + settings + '>')
                .next('iframe')
                .attr('src', protocol + '://' + url + '?' + params)
                .attr('width', width)
                .attr('height', height)
                .attr('id', '/tv/#/' + video)
                .addClass('video vimeo')
                .after('<p>' + api['description'])
                .after('<a href="' + api['user_url'] + '"><h1>' + api['user_name'])
         ...