如何为嵌入的多个YouTube视频实现带标题的懒加载

Got it, let's get those video titles showing right on top of your lazy-loaded YouTube thumbnails. The core idea is to add a title element to each video container, style it to overlay the thumbnail, and wire it up with your existing lazy-load code. Here's a step-by-step fix:

1. Update Your HTML Structure #

First, add a data-title attribute to each of your .youtube containers to store the video title. This makes it easy to pull the title into your JavaScript later:

<div class="youtube" data-embed="dQw4w9WgXcQ" data-title="Rick Astley - Never Gonna Give You Up"></div>
<div class="youtube" data-embed="9bZkp7q19f0" data-title="PSY - GANGNAM STYLE(강남스타일) M/V"></div>

2. Modify the JavaScript Code #

We'll adjust your existing script to create a title element for each video, populate it with the data-title value, and add it alongside the thumbnail. I also fixed a scoping issue with the i variable that would have caused problems with multiple videos:

jQuery(document).ready(function($) {
  (function() {
    var youtube = document.querySelectorAll(".youtube");
    
    for (var i = 0; i < youtube.length; i++) {
      var container = youtube[i];
      var embedId = container.dataset.embed;
      var videoTitle = container.dataset.title;
      
      // Create thumbnail image
      var source = "https://img.youtube.com/vi/" + embedId + "/sddefault.jpg";
      var image = new Image();
      image.className = "youtube-thumbnail";
      image.src = source;
      
      // Create title overlay element
      var titleElement = document.createElement("div");
      titleElement.className = "youtube-title";
      titleElement.textContent = videoTitle;
      
      // Add both elements to the container once the image loads
      image.addEventListener("load", (function(container, img, title) {
        return function() {
          container.appendChild(img);
          container.appendChild(title);
        };
      })(container, image, titleElement));
      
      // Keep your existing click-to-load functionality
      container.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&autoplay=1");
        this.innerHTML = "";
        this.appendChild(iframe);
      });
    }
  })();
});

3. Add CSS for the Title Overlay #

This CSS will position the title on top of the thumbnail, add a semi-transparent background for readability, and style the text. I also added optional play icon styling to make it clear the container is clickable:

.youtube {
  position: relative;
  width: 100%;
  max-width: 640px;
  cursor: pointer;
  margin: 1rem 0;
}

.youtube-thumbnail {
  width: 100%;
  display: block;
}

.youtube-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 1rem;
  line-height: 1.4;
}

/* Optional: Add play icon overlay */
.youtube::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  z-index: 1;
}

.youtube::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid white;
  z-index: 2;
}

Key Details #

• The .youtube container uses position: relative to let us absolutely position the title inside it.
• The title sticks to the bottom of the thumbnail with a dark semi-transparent background, ensuring text is readable over any thumbnail.
• When a user clicks the container, this.innerHTML = "" removes both the thumbnail and title, replacing them with the YouTube iframe.

内容的提问来源于stack exchange，提问作者developerme