JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="check" id="check">
<label for="check">Click the thumbnail</label>
    
<div class="videoWrapper">
 <iframe width="640" height="320" src="//www.youtube.com/embed/cRy-slNEaCI" frameborder="0" allowfullscreen></iframe>
</div>

CSS

* {
    border: 1px solid;
}

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

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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,img:first ').toggle()
            // $("img:first").toggle();
        });
    }