JSFiddle - React, Tailwind, and code Playground

by seankoole

JavaScript

window.addEventListener('load', () => {
	var $youtube = document.querySelectorAll('.vi-lazyload[data-type="youtube"]');
  
  
  


});


(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(),
            custom_image = $this.data('thumbnail'),
            vi_playbtn = $this.find('.video-control'),
            $image = $this.find('.vi-lazyload-img');

        //image - thumbnail
        vi_image.classList.add('vi-lazyload-img');
        vi_image.classList.add('md:mx-auto');

        if (custom_image !== undefined) {
            vi_image.src = custom_image;
        } else {
            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;

        //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);