JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancybox.net/js/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<link rel="stylesheet" href="http://fancybox.net/js/fancybox/jquery.fancybox-1.3.1.css">
<a href="http://www.youtube.com/watch?v=sqC3tk_-e7g" title="The Problem" id="homevideo1">
    <span class="playButton"></span>
    <img width="170" src="/images/all/video-image1.jpg" alt="" />
    <div class="videoTitle">The Problem</div>
</a>

JavaScript

$("#homevideo1").click(function() {
    $.fancybox({
        'padding'       : 0,
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'         : this.title,
        'width'     : 740,
        'height'        : 495,
        'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type'          : 'swf',
        'swf'           : {
            'wmode'        : 'transparent',
            'allowfullscreen'   : 'true'
        }
    });
    return false;
});