Get started with lazyyt CDN

CC-BY-SA-4.0 licensed

Lazyload: library delaying image loading until viewport, enhancing page load speeds.

Tags:
  • jQuery
  • lazy load
  • youtube

Stable version

Copied!

How to start using lazyyt CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with lazyyt CDN - cdnhub.io</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.cdnhub.io/lazyyt/0.3.4/lazyYT.min.js"></script>
  <style>
    iframe.lazy {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }
  </style>
</head>
<body>
  <button id="loadVideos">Load Videos</button>
  <div id="videoContainer">
    <p>Click the button to load and display the videos lazily.</p>
  </div>
  <script>
    $(document).ready(function() {
      $('#loadVideos').click(function() {
        $('iframe').attr('src', 'https://www.youtube.com/embed/VIDEO_ID_1');
        $('iframe:first').addClass('lazy');
        $('iframe:first').one('load.lazy', function() {
          $(this).css('opacity', '1');
        });
        $('iframe:first').lazyYT();

        setTimeout(function() {
          $('iframe:last').addClass('lazy');
          $('iframe:last').one('load.lazy', function() {
            $(this).css('opacity', '1');
          });
          $('iframe:last').lazyYT();
        }, 2000);
      });
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions