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($){
	
	// 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);