JSFiddle - React, Tailwind, and code Playground

HTML

<div id="controls">
    <input type="text" placeholder="URL or Slug" id="url" value="http://www.youtube.com/watch?v=1nZKwreCVtU">
    <select id="opts">
        <option value="1">Feature Rich Player Autoplay</option>  
        <option value="2">Simple Player</option>  
        <option value="3">Chromeless Player</option>  
        <option value="4">Themed Player</option>  
        <option value="5">Themed Color</option>  
        <option value="6">HD Player</option>  
        <option value="7">Custom Size Player</option>       
    </select>
    <input type="button" id="work" value="Embed">
</div>

<div id="box"></div>

CSS

#box, #controls{
    width:600px;
    height:350px;
    margin:10px auto;
}
#controls{
    height:auto;
}

JavaScript

var yt = yt || (function() {

    var defaultOptions = {
        width: false,
        height: false,
        controls: true,
        theme: 'dark',
        color: 'orange',
        autoplay: false,
        allowFullScreen: true,
        showInfo: false,
        showSearch: false,
        relatedVideos: false,
        annotations: false,
        closedCaptions: false,
        loop: false,
        hd: false
    };

    function getParam(url, name) {
        return decodeURI((RegExp(name + '=' + '(.+?)(&|$)').exec(url) || [null])[1]);
    }


    function compileEmbed(selector, linkOrSlug, options) {

        options = $.extend({}, defaultOptions, options);
        console.log(options);
        var slug = getParam(linkOrSlug, 'v') || linkOrSlug;

        var params = '?';

        params += options.controls ? 'controls=1&' : 'controls=0&';
        params += 'theme=' + options.theme + '&';
        params += 'color=' + options.color + '&';
        params += options.autoplay ? 'autoplay=1&' : 'autoplay=0&';
        params += options.showInfo ? 'showinfo=1&' : 'showinfo=0&';
        params += options.showSearch ? 'showsearch=1&' : 'showsearch=0&';
        params += options.relatedVideos ? 'rel=1&' : 'rel=0&';
        params += options.annotations ? '' : 'iv_load_policy=3&';
        params += options.closedCaptions ? '' : 'cc_load_policy=1&';
        params += options.loop ? 'loop=1&' : 'loop=0&';
        params += options.hd ? 'hd=1&' : '';
        params += options.allowFullScreen ? 'fs=1' : 'fs=0';

        var fs = options.allowFullScreen ? ' allowfullscreen' : '';

        var w = options.width ? ' width="' + options.width + '"' : ' width="' + $(selector).width() + '"';
        var h = options.height ? ' height="' + options.height + '"' : ' height="' + $(selector).height() + '"';

        var embed = '<iframe frameborder="0" src="http://youtube.com/embed/' + slug + params + '"' + fs + w + h + '>';
        console.log(embed);
        return embed;
    }

   ...