JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<!-- section-heading -->
        <div class="text-center pt-10 md:pt-16 mb-11 md:mb-24">
            <h1 class="font-sofia-pro-semi-bold text-headline-3 tracking-1 text-gray-300 mb-5 md:mb-9 md:font-sofia-pro-medium md:text-headline-1 md:tracking-1.5">
                The Venturity Way            </h1>
            <div class="md:max-w-5xl md:mx-auto">
                
	                                <div class="md:max-w-4xl md:mx-auto">
                        <p class="font-sofia-pro-light text-subtitle-2 tracking-0.4 text-gray-200">
                           We’re not your average accountants. We are a different brand of professionals that have reinvented the way accounting and finance professionals work with their clients. We deliver more than just spreadsheets, calculations, and financial reports. Sure, those are required tools that you expect from your accounting department, but your Venturity team does more. We go beyond number crunching and become full-fledged trusted advisors.                        </p>
                    </div>
	            	                            <p class="font-sofia-pro-medium text-subtitle-2 tracking-0.4 text-gray-200 md:text-headline-5 md:tracking-0.6">
                                    </p>

	                                <div class="relative mt-11 md:mt-24 vi-lazyload cursor-pointer" data-type="vimeo"
                         data-id="156904358" data-thumbnail="https://venturity.com/wp-content/uploads/2020/12/bg-video.png">
                        <img class="w-full" src="https://venturity.com/wp-content/uploads/2020/12/bg-video.png"
                             alt="">

                        <button
                                class="white-play-btn appearance-none whitespace-nowrap vi-lazyload-playbtn video-play-btn absolute transition transform -translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 cursor-pointer text-white font-sofia-pro-semi-bold text-body-1 tracking-0.3 md:text-headline-4 lg:text-headline-3...

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 $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(),
            custom_image = $this.data('thumbnail'),
            vi_playbtn = document.createElement('div'),
            $image = $this.find('.vi-lazyload-img');
            
            
            
        $.getJSON('https://vimeo.com/api/v2/video/' + id + '.json', function(data) {
        
                    console.log('foobar');

                    console.log(data);

            data = data[0];
            //image - thumbnail
            vi_image.classList.add('vi-lazyload-img');
            if( custom_image !== undefined && custom_image !== '' ){
                vi_image.src = custom_image;
            }else{
                vi_image.src = data.thumbnail_large;
                vi_image.alt = data.title;
                //append thumbails after they are loaded
                vi_image.addEventListener('load', function() {}(i));
                e.appendChild(vi_image);
            }
            //play btn
            vi_playbtn.classList.add('vi-lazyload-playbtn');
            e.appendChild(vi_playbtn);
            //create iframe onclick play-btn
            e.addEventListener('click', function() {
            
            console.log('foobar');
            
            
                var vi_container = this,
                    vi_iframe = document.createElement('iframe');
                vi_iframe.src = 'https://player.vimeo.com/video/' + vi_container.dataset.id + '?autoplay=1&autopause=0';
                vi_iframe.setAttribute('allow', 'autoplay;fullscreen');
                vi_iframe.setAttribute('allowfullscreen', '');
               ...