I'm using Owl Carousel to display both YouTube and Vimeo videos, and the YouTube videos are displaying their corresponding thumbnail images, but the Vimeo videos aren't. I looked into the source and noticed that Owl's js seems to be pulling in the URL for the image in a data-src attribute. For the YouTube videos, it's taking the data-src value and applying it as a background image (via css) for the div. For the Vimeo videos, it's pulling in the data-src, but not applying it to the div's css. Here's a snippet of the code as an example:
<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>
The top .owl-item is a YouTube video, and the bottom is a Vimeo video. You'll see the difference in the .owl-video-tn divs.
I've tried a couple of jQuery workarounds that don't seem to be working. (Maybe I'm doing something wrong?) Here's what I've tried so far:
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');
});
Thoughts? Suggestions? Corrections on my jQuery?
