STYLE SWITCHER

How to “Lazy Load” Embedded YouTube Videos

How to “Lazy Load” Embedded YouTube Videos

Embedding a Youtube video has become a completely normal process for anyone involved with the web; copy, paste, done. However, pulling in an external resource like a Youtube video may slow down a web page’s load performance, especially if there are two or more videos embedded on the same page.
By embedding videos we request more than just a video file. A number of resources are fetched, including JavaScript files, a stylesheet, images, and advertisements. And as you can from the screenshot below, two Youtube videos equates to 22 HTTP requests with a total of 624kb downloaded. These numbers will climb as we embed more videos on the page.

HTML Structure

<div class="wrapper">
  <div class="youtube" data-embed="AqcjdkPMPJA">
    <div class="play-button"></div>
  </div>
</div>

CSS

html {
  background-color: #f3f3f3;
}
.wrapper {
  max-width: 680px;
  margin: 60px auto;
  padding: 0 20px;
}

.youtube {
  background-color: #000;
  margin-bottom: 30px;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}
.youtube img {
  width: 100%;
  top: -16.82%;
  left: 0;
  opacity: 0.7;
}
.youtube .play-button {
  width: 90px;
  height: 60px;
  background-color: #333;
  box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
  z-index: 1;
  opacity: 0.8;
  border-radius: 6px;
}
.youtube .play-button:before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 26.0px;
  border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
  cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
  position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
  top: 50%;
  left: 50%;
  transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

Javascript

( function() {

  var youtube = document.querySelectorAll( ".youtube" );
  
  for (var i = 0; i < youtube.length; i++) {
    
    var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
    
    var image = new Image();
        image.src = source;
        image.addEventListener( "load", function() {
          youtube[ i ].appendChild( image );
        }( i ) );
    
        youtube[i].addEventListener( "click", function() {

          var iframe = document.createElement( "iframe" );

              iframe.setAttribute( "frameborder", "0" );
              iframe.setAttribute( "allowfullscreen", "" );
              iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );

              this.innerHTML = "";
              this.appendChild( iframe );
        } );  
  };
  
} )();
Website
More
Pika – Universal javascript is here

Pika – Universal javascript is here

ES module syntax (ESM) is JavaScript's latest native module system. Officially ratified in 2015, its import/export syntax is more compact, more easily analyzed and more reliably optimized. This all results in smaller, faster JavaScript on the web.

How does ESM make my website 90% faster?

ESM introduces something new to JavaScript and the way the web works: every JavaScript module can now be indexed and cached in a way that is universally accessible. That means that any site can push new changes and a user's browser will only fetch the files that have changed. No more bundling dependencies with source code. No more single-line changes blowing out your application's entire cached bundle.

Website
More
ApexCharts – Modern & Interactive Open-source Charts

ApexCharts – Modern & Interactive Open-source Charts

ApexCharts is now a partner of FusionCharts to bring a wider range of data visualization components to our users.

With extensive documentation, consistent API, and cross-browser support, FusionCharts is loved by 28,000+ customers and 750,000+ developers across the globe. FusionCharts helps you to easily integrate with any JavaScript framework or server-side programming language.

Website
More
FingerprintJS – Modern & Flexible Browser Fingerprinting Library

FingerprintJS – Modern & Flexible Browser Fingerprinting Library

FingerprintJS is the most advanced open-source fraud detection JS library. FingerprintJS collects all the unique features from a device/browser passing them through a hash function to provide a unique identifier.

FingerprintJS has a unique approach to prevent fraud on your website. The library generates a unique identifier of a browser without using cookies or any information that can be easily reset by a malicious user. By storing this identifier in your database you will get an accurate idea if someone is trying to use the same device (computer, tablet or phone) to register twice, submit a vote multiple times, use multiple credit cards or perform any other type of suspicious activity.

Website
More
Zdog – Round, Flat, Designer-Friendly Pseudo-3D Engine

Zdog – Round, Flat, Designer-Friendly Pseudo-3D Engine

Zdog is a 3D JavaScript engine for <canvas> and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special.
Features:
  • Zdog is small. 2,100 lines of code for the entire library. 28KB minified.
  • Zdog is round. All circular shapes are rendered as proper circles with rounded edges. No polygonal jaggies.
  • Zdog is friendly. Modeling is done with a straight-forward declarative API.

Zdog was designed to bring the simplicity of vector illustration into 3D. Drawing circles and squares is easy and fun. Zdog just adds another dimension.

Download

Link directly to Zdog JS on unpkg.

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
Website
More