Owl 旋转木马：不将 data-src 值作为 Vimeo 视频 CSS 中的背景图像

Question

我正在使用 Owl Carousel 来显示 YouTube 和 Vimeo 视频，YouTube 视频会显示其相应的缩略图，但 Vimeo 视频不会。我查看了源代码并注意到 Owl 的 js 似乎正在为 data-src 属性中的图像引入 URL。对于 YouTube 视频，它采用 data-src 值并将其应用为 div 的背景图像（通过 css）。对于 Vimeo 视频，它会引入数据源，但不会将其应用于 div 的 css。下面是一段代码作为示例：

<div class="owl-item cloned" data-video="https://www.youtube.com/watch?v=9RBOvGwQ4To" style="width: 580px; margin-right: 10px;">
  <div class="item-video" data-merge="2">
    <div class="owl-video-wrapper">
      <a class="owl-video" href="https://www.youtube.com/watch?v=9RBOvGwQ4To" style="display: none;"></a>
      <div class="owl-video-play-icon"></div>
      <div class="owl-video-tn owl-lazy" data-src="http://img.youtube.com/vi/9RBOvGwQ4To/hqdefault.jpg" style="background-image: url("http://img.youtube.com/vi/9RBOvGwQ4To/hqdefault.jpg"); opacity: 1;"></div>
    </div>
  </div>
</div>

<div class="owl-item active center" data-video="https://player.vimeo.com/video/143757230" style="width: 580px; margin-right: 10px;">
  <div class="item-video" data-merge="2">
    <div class="owl-video-wrapper">
      <a class="owl-video" href="https://player.vimeo.com/video/143757230" style="display: none;"></a>
      <div class="owl-video-play-icon"></div>
      <div class="owl-video-tn owl-lazy" data-src="https://i.vimeocdn.com/video/541423305_640.jpg"></div>
    </div>
  </div>
</div>

顶部 .owl-item 是 YouTube 视频，底部是 Vimeo 视频。您会在 .owl-video-tn divs.

中看到差异

我已经尝试了几个 jQuery 似乎不起作用的解决方法。（也许我做错了什么？）这是我到目前为止尝试过的方法：

if ($("div[data-src*='vimeocdn']")) {
    var imageUrl = $(".owl-video-tn").attr("data-src")
    $('.owl-video-tn').css('background-image', 'url(' + imageUrl + ')':'background-repeat', 'no-repeat':'background-position','left top');
}

$("div[data-src*='vimeocdn']").each(function () {
  var imageUrl = $(".owl-video-tn").attr("data-src")
  $(this).css('background-image', 'url(' + imageUrl + ')':'background-repeat', 'no-repeat':'background-position','left top');
});

$("div[data-src*='vimeocdn']").each(function () {
  var $img = $("div[data-src*='vimeocdn']");
  $(this).css('background-image', 'url('+ $img +')':'background-repeat', 'no-repeat':'background-position','left top');
});

想法？建议？更正我的 jQuery?

Answer 1

事实证明，我根本不需要 jQuery 解决方法。我启用了 "lazyLoad" 选项，禁用它解决了我的问题。

Owl 旋转木马：不将 data-src 值作为 Vimeo 视频 CSS 中的背景图像

Owl carousel: not pulling data-src value as background image in CSS for Vimeo videos

css

jquery

attributes

background-image

owl-carousel