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

Question

我已经找到 jquery 如何获取 Vimeo 缩略图 URL 的方法。但是我的页面会有不止一个 Vimeo 视频。不确定如何将相关缩略图 URL 与其相关 div 放在一起。我尝试使用“每个”“var image as a set of image”.. 但是 none 它们似乎有效。

$(".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>

Answer 1

在这一行中，您使用 class .video-container

将背景图像设置为每个元素

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

我会存储引用当前元素的“this” class .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(...)
});

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

Put Vimeo thumbnail URL into each same class div - jquery

jquery

thumbnails

vimeo