将 Vimeo 缩略图 URL 放入每个相同的类 div - jquery答案

【问题标题】：Put Vimeo thumbnail URL into each same class div - jquery将 Vimeo 缩略图 URL 放入每个相同的类 div - jquery
【发布时间】：2021-08-21 23:21:10
【问题描述】：

我已经找到了一种通过 jquery 获取 Vimeo 缩略图 URL 的方法。但是我的页面将有不止一个 Vimeo 视频。不确定如何为其相关 div 放置相关的缩略图 URL。我尝试使用“每个”“var 图像作为一组图像”.. 但它们似乎都不起作用。

$(".video-container").each( function() {
  var iframe           = $(this).children('iframe');
  var iframe_src       = iframe.attr('src');
  
  if (iframe_src.indexOf("www.youtube.com") >= 0) {
    // alert('youtube');
  } else if (iframe_src.indexOf("player.vimeo.com") >= 0) {
    alert('vimeo');
    var vimeoVideoID = iframe_src.match(/vimeo\.com.*(\?v=|\/video\/)(.{9})/).pop();
    // alert(vimeoVideoID);

    $.getJSON('https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/' + vimeoVideoID, {
        format: "json",
        width: "640"
      },
      function(data) {
        // alert(data.thumbnail_url);
        $(".video-container").css( "background-image", "url('"+data.thumbnail_url+"')" );
      });
  }
});

.video-container{
width: 200px;
height: 100px;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}

.video-container iframe{
width: 100%; 
height: auto;
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <h4>Vimeo video 1</h4>
        <div class="video-container">
          <iframe width="750" height="420" src="https://player.vimeo.com/video/218830007" frameborder="0" title="Video Title"></iframe>
        </div>

      <h4>Vimeo video 2</h4>
        <div class="video-container">
          <iframe width="750" height="420" src="https://player.vimeo.com/video/548847228" frameborder="0" title="Video Title"></iframe>
        </div>

【问题讨论】：

标签： jquery thumbnails vimeo

【解决方案1】：

在这一行中，您将背景图像设置为每个具有 .video-container 类的元素

$(".video-container").css( "background-image", "url('"+data.thumbnail_url+"')" );

我将存储引用当前元素的“this”类 .video-container

$(".video-container").each( function() {
   var $self = $(this);

在 api 成功时我会这样做

 $self.css( "background-image", "url('"+data.thumbnail_url+"')" );

PS：或者你可以只使用 jquery 的参数，例如：

$(".video-container").each(function(index,element){
   $(element).css(...)
});

【讨论】：