JSFiddle - React, Tailwind, and code Playground

by curiohub

HTML

<!-- only adding video id and class name,rest is done by script. -->
<!-- View full Tutorial. at curiohub.blogspot.com -->
<div class="yvid" vid="iG9CE55wbtY"></div>

CSS

.yvid {
    display: block;
    width: 640px;
    height: 340px;
    margin: 20px auto;
    position: relative;
    background:#000;
}
.vidthumb {
    width: inherit;
    height: inherit;
    cursor: pointer;
}
.playb {
    display: block;
    width: 70px;
    height: 70px;
    position: absolute;
    top: 33%;
    left: 42%;
    text-align: center;
    cursor: pointer;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 8px solid #fff;
    box-shadow: 0px 0px 3px 0px #000;
}
.playb:after {
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    content:" ";
    top: 23%;
    left: 36%;
    border-top: 19px solid transparent;
    border-left: 30px solid white;
    border-bottom: 19px solid transparent;
}
.yvid:hover .playb {
    background: red;
}

JavaScript

(function ($) {
//<![CDATA[
    // this funtion puts video thubmnail in each Vid Div [for YouTube] 

    $(".yvid").each(function () {
        $this = $(this);
        var vid = $this.attr('vid');
        $this.html('<img class="vidthumb" src="http://img.youtube.com/vi/' + vid + '/hqdefault.jpg" style="width:inherit;height:inherit;"></img>                    <span class="playb"></span>');

    });
    //Below funtion embeds video onclick
    $(".yvid").on('click', function () {
        $this = $(this);
        var vid = $this.attr('vid');
        var w = $this.width(); //change video width according to parent div
        var h = $this.height(); //change video height according to parent div
        var vw = w ? w : 640;
        var vh = h ? h : 360;
        $this.html('<iframe width="' + vw + '" height="' + vh + '" src="//www.youtube.com/embed/' + vid + '?autoplay=1"  frameborder="0"                                   allowfullscreen="1" autohide="1"></iframe>');
    });
//]]>
})(jQuery);