Implementing Lazy Loading for Youtube Embeds in Jekyll Posts

Implementing lazy loading for YouTube embeds in Jekyll posts can significantly improve your website's load times and user experience. Lazy loading defers the loading of embedded videos until they are about to enter the viewport, reducing initial page load and saving bandwidth.

Why Use Lazy Loading for YouTube Embeds?

Embedding multiple YouTube videos on a single page can slow down your site. Lazy loading helps by loading videos only when visitors scroll near them. This results in faster page loads, decreased bounce rates, and better SEO performance.

How to Implement Lazy Loading in Jekyll

To add lazy loading for YouTube videos in Jekyll, you can replace standard embed codes with a lightweight placeholder and load the actual video dynamically using JavaScript.

Step 1: Use a Placeholder Image

Instead of embedding the full iframe, insert an image thumbnail of the video with a play button overlay. This acts as a placeholder.

Step 2: Add a Click Event to Load the Video

Use JavaScript to replace the placeholder with the actual iframe when the user clicks on it. This defers loading the video until needed.

Example Implementation

Here's a simple example of how to set this up in your Jekyll post:

<div class="video-container">
  <div class="video-placeholder" data-video-id="dQw4w9WgXcQ">
    <img src="https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg" alt="Video thumbnail">
    <div class="play-button">▶</div>
  </div>
</div>

<script>
document.querySelectorAll('.video-placeholder').forEach(function(placeholder) {
  placeholder.addEventListener('click', function() {
    const videoId = this.getAttribute('data-video-id');
    const iframe = document.createElement('iframe');
    iframe.setAttribute('src', 'https://www.youtube.com/embed/' + videoId + '?autoplay=1');
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
    iframe.setAttribute('allowfullscreen', '');
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    this.innerHTML = '';
    this.appendChild(iframe);
  });
});
</script>

This approach ensures videos load only when clicked, saving resources and improving load times for your Jekyll site.

Additional Tips

• Customize the thumbnail image for better branding.
• Adjust CSS for responsive video containers.
• Test across different devices to ensure compatibility.

By implementing lazy loading, you enhance your site's performance and provide a smoother experience for your visitors. Happy coding!