JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<div class="example">
  <h2>Vimeo with Thumbnail</h2>

  <div class="vi-lazyload" data-type="vimeo" data-id="400448843">
    <img class="vi-lazyload-img" src="https://i.vimeocdn.com/video/870162018_640.jpg" alt="The Industry is Broken">
    <div class="vi-lazyload-playbtn"></div>
  </div>

</div>


<div class="example">
  <h2>Vimeo no Thumbnail</h2>
  <div class="vi-lazyload" data-type="vimeo" data-id="400448843">
    <div class="vi-lazyload-playbtn"></div>
  </div>

</div>

<div class="example">
  <h2>YouTube with Thumbnail</h2>

  <div class="vi-lazyload" data-type="youtube" data-id="O34PVxzhhWA">
    <img class="vi-lazyload-img" src="https://i.vimeocdn.com/video/870162018_640.jpg" alt="The Industry is Broken">
    <div class="vi-lazyload-playbtn"></div>
  </div>

</div>


<div class="example">
  <h2>YouTube no Thumbnail</h2>
  <div class="vi-lazyload" data-type="youtube" data-id="O34PVxzhhWA">
    <div class="vi-lazyload-playbtn"></div>
  </div>

</div>

CSS

.example {
  padding: 20px;
}

h1 {
  font-size: 16px;
}

.vi-lazyload-img {
  width: 200px;
  height: auto;

}

JavaScript

/*!
 * Vimeo LazyLoad
 * v1.0.2
 * https://github.com/the-muda-organization/vimeo-lazyload
 * MIT License
 */
(function($) {

  //select all elements with class .vi-lazyload
  var $youtube = $('.vi-lazyload[data-type="youtube"]');

  //for each element execute:

  $youtube.each(function(i, e) {

    var $this = $(this),
      id = $this.data('id'),
      vi_image = new Image(),
      vi_playbtn = document.createElement('div'),
      $image = $this.find('.vi-lazyload-img');

    //image - thumbnail
    vi_image.classList.add('vi-lazyload-img');

    if (!$image.length) {
      vi_image.src = 'https://img.youtube.com/vi/' + id + '/maxresdefault.jpg';

      //append thumbails after they are loaded
      vi_image.addEventListener('load', function() {
        e.appendChild(vi_image);
      }(i));
    }

    // vi_image.alt = data.title;

    //append thumbails after they are loaded
    vi_image.addEventListener('load', function() {
      e.appendChild(vi_image);
    }(i));

    //play btn
    vi_playbtn.classList.add('vi-lazyload-playbtn');
    e.appendChild(vi_playbtn);

    //create iframe onclick play-btn
    e.addEventListener('click', function() {
      var vi_container = this,
        vi_iframe = document.createElement('iframe');

      vi_iframe.src = 'https://www.youtube.com/embed/' + id + '?autoplay=1';
      vi_iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
      vi_iframe.setAttribute('allowfullscreen', '');
      vi_container.appendChild(vi_iframe);
    });

  });

})(jQuery);



/*!
 * Vimeo LazyLoad
 * v1.0.2
 * https://github.com/the-muda-organization/vimeo-lazyload
 * MIT License
 */
(function($) {

  //select all elements with class .vi-lazyload
  var $vimeo = $('.vi-lazyload[data-type="vimeo"]');

  //for each element execute:

  $vimeo.each(function(i, e) {

    var $this = $(this),
      id = $this.data('id'),
      vi_image = new Image(),
      vi_playbtn = document.createElement('div'),
 ...