JSFiddle - React, Tailwind, and code Playground

by Pedro Pinto

HTML

<h1>YouTube</h1>
<a href="https://www.youtube.com/watch?v=V8x0LM8pK0E" class="dth-video">
  <img src="http://placehold.it/350x150">
</a>

CSS

img {
    vertical-align: middle;
}

a {
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
    display: inline-block;
    overflow: hidden;
    position: relative;
}

a::before,
a::after {
    content: '';
    display: block;
    position: absolute;
    transition: transform 0.25s ease;
}

a::before {
    background: rgba(0,0,0,0.5);
    border-radius: 9999px;
    height: 38px;
    /*left: ~"calc(50% - 19px)";*/
    left: calc(50% - 19px);
    /*top: ~"calc(50% - 19px)";*/
    top: calc(50% - 19px);
    width: 38px;
}

a::after {
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    height: 0;
    /*left: ~"calc(50% - 6px)";*/
    left: calc(50% - 6px);
    /*top: ~"calc(50% - 9px)";*/
    top: calc(50% - 9px);
    width: 0;
}

a:hover::before,
a:hover::after {
    transform: scale(1.25);
}





/* ### SPINNER ### */

.spinner {
    display: inline-block;
    text-align: center;
}
.spinner--small {
    width: 30px;
    height: 20px;
}
.spinner--small > div {
    width: 9px;
    height: 9px;
    background-color: #555;
}
.spinner > div {
    position: relative;
    margin-left: 1px;
    top: 2px;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: spinner-bouncedelay 1.4s infinite ease-in-out both;
    animation: spinner-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
@-webkit-keyframes spinner-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}
@keyframes spinner-bouncedelay {
    0%, 80%, 100% { 
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% { 
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
}





/* ### ZOOMABLE ### */

.td-zoomable {

 ...

JavaScript

$(function(){

  var Zoomable = {
    init: function(zoomableEls) {
      window._this = this;
      
      if (!zoomableEls || zoomableEls.length < 1) {
        console.error('Zoomable module requires an element as argument!');
        return false;
      }
    
      _this.setHTMLinPlace();
      
      _this.elements = {
        triggers: zoomableEls,
        wrapper: $('.td-zoomable'),
        contentHolder: $('.td-zoomable__content_holder'),
        loader: $('.td-zoomable__loader'),
        close: $('.td-zoomable__close'),
        background: $('.td-zoomable__background')
      };
      
      
      // ### Events

      // Zoom in
      $(_this.elements.triggers).on('click', function(event) {
          event.preventDefault();
          _this.setContent(this);
      });
      
      // Zoom out
      $(_this.elements.close).on('click', function() {
        _this.hide();
      });

      $(_this.elements.background).on('click', function() {
        _this.hide();
      });

      $(document).on('keyup', function(event) {
        if (event.keyCode == 27) { // ESC
          _this.hide();
        }
      });
      
    },
    
    setHTMLinPlace: function() {
      $('body').append('' +
        '<div class="td-zoomable td-zoomable--hidden">' +
          '<div class="td-zoomable__background"></div>' +
          '<div class="td-zoomable__content">' +
            '<div class="td-zoomable__close">' +
              '<div class="td-zoomable__close_icon"></div>' +
            '</div>' +
            '<div class="td-zoomable__loader td-zoomable--hidden">' +
              '<div class="spinner spinner--small"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>' +
            '</div>' +
            '<div class="td-zoomable__content_ratio"></div>' +
            '<div class="td-zoomable__content_scroll">' +
              '<div class="td-zoomable__content_holder"></div>' +
            '</div>' +
          '</div>' +
        '</div>' +
     ...