JSFiddle - React, Tailwind, and code Playground

by Faiz Vadakkumpadath

HTML

<p>Click here to <a id="Jeff" href="javascript:LoadVideo('Jeff', '44Hx9FtYpPQ')" style="padding: 0px">open video dialog box</a>. The video will open in new tab if screen/window is tiny.</p>

JavaScript

function LoadVideo(video, id, width, height) {
    var width = width || 640;
    height = height || 360,
    c = {
        display: 'inline-block',
            'background-color': 'rgba(0,0,0,0.75)',
        position: 'fixed',
        left: 0,
        top: 0,
        width: '100%',
        height: '100%',
            'z-index': 9999
    },
    ic = {
        display: 'inline-block',
        position: 'relative',
        left: '50%',
        top: '50%',
        margin: (-height / 2) + 'px -' + (width / 2) + 'px',
    },
    vurl = 'http://www.youtube.com/embed/' + id + '?autoplay=1&modestbranding=1&rel=0&showinfo=0&theme=light&autohide=1',
    i = '<iframe src="' + vurl + '" width="' + width + '" height="' + height + '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
    if ($(window).width() < width || $(window).height() < height) window.open(vurl);
    else $('#' + video).append(
    $('<div>').css(c).append($(i).css(ic)).click(

    function () {
        $('#' + video + ' div').remove();
        return false;
    }));
}