JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="check" id="check">
<label for="check">Click the thumbnail</label>
<iframe width="420" height="315" src="//www.youtube.com/embed/1sIWez9HAbA" frameborder="0" allowfullscreen></iframe>

CSS

iframe {
    display:none;
}

img {
    float:left;
    max-width:640px;
    min-width: 320px;
    max-height: 320px;
}

JavaScript

var iframe = $('iframe:first');
    var iframe_src = iframe.attr('src');
    var youtube_video_id = iframe_src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();

    if (youtube_video_id.length == 11) {
        var video_thumbnail = $('<img src="//img.youtube.com/vi/' + youtube_video_id + '/0.jpg">');
        $('body').append(video_thumbnail);

        $('#check').click(function () {
            $('iframe:first').toggle();
            });
        });
    }