如何更改猫头鹰轮播中的视频背景图像?

Question

现在class.owl-video-tn有一个内联样式，例如：background-image：url(//img.youtube.com/vi/EF_kj2ojZaE/hqdefault.jpg(。但是我需要能够嵌入我的照片来预览视频吗？如何实现这种可能性？

https://codepen.io/malinosky/pen/WKBjOa

$('.owl-carousel').owlCarousel({
items:1,
loop:true,
margin:10,
video:true,
lazyLoad:false,
center:true,
responsive:{
480:{
items:2
},
600:{
items:4
}
}
})

Answer 1

你可以像这样用你的图像覆盖css

.owl-video-tn {
background-image: url('http://via.placeholder.com/600x400') !important;
}

如果要定位特定图像，可以使用例如:nth-child通过指定索引来定位特定的视频元素

喜欢这个：

.owl-item:nth-child(5) .owl-video-tn {
background-image: url('http://via.placeholder.com/600x400') !important;
}