JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<div class="video"><a href="http://www.youtube.com/watch?v=8bKmrhI-YT8" data-provider="modal-video" data-video-embed="http://www.youtube.com/embed/8bKmrhI-YT8" data-target=".modal">
    <img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg" />
    </a>

</div>
<div class="modal " tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <iframe src="" width="640" height="360" frameborder="0" allowfullscreen></iframe>
        
    </div>
    </div>
</div>

CSS

.video {
    max-width: 150px;
}
.video img {
    max-width: 100%;
}

.modal{
display:none;
}
}

JavaScript

$('[data-provider="modal-video"]').on(
    'click',

function (evt) {
    evt.preventDefault();
    var $target = $(evt.currentTarget),
        videoSrc = $target.data('video-embed'),
        $modal = $($target.data('target'));

  
    //Fit Vids Implemented Below for Mobile Compatibility
    //$("#vid1Thumbnail-1 iframe").wrap("<div class='flex-video'/>");
    //$(".flex-video").fitVids();

    $modal
    .find('iframe').attr('src', videoSrc)
    .end()
    .on('hide.bs.modal', function () {
        $(this)
        .off('hide.bs.modal')
        .find('iframe').attr('src', '');
    })
    .modal('show');
});