猫头鹰旋转木马不显示视频

我这里有一个例子：VideoSlide Example 猫头鹰旋转木马不显示视频

我的问题是什么显示器。

我已经有效地复制了猫头鹰站点的代码，但是我什么也没有显示。

最初，我编码在一个更大的网站，这是减少版本只适用于旋转木马。我有旋转木马使用图像，但视频躲过我，如果有的话，视频看起来应该更简单！

我已经采取了最新的猫头鹰JS和CSS版本2

我还没有修改的JS或CSS，它在它的下载状态。

我已经完成了与猫头鹰页面的视频和卡尔文学院的代码比较，卡尔文学院也使用带有视频的猫头鹰旋转木马。

据我所见，我也这样做了。

显然我没有。

黛比

来源

2014-10-04 Deborah Taylor

刚刚从快速检查控制台，貌似没有加载JS猫头鹰。

<script src="../assets/owlcarousel/owl.carousel.js"></script>

来源

2014-10-04 15:52:44 Mintberry

虽然你是100％正确的，这是一个剪切和粘贴错误，而我是从猫头鹰演示复制，是的，我也觉得现在哑！我把它放回到我的JS文件夹中的JScript中，但它仍然不起作用。所以我仍然难倒。 – 2014-10-04 17:32:13

-1

我不得不手动增加一个高度到.owl-video-wrapper，现在看起来好了。

希望这可以帮助未来的人。这有点奇怪，但。

来源

2015-02-15 14:15:56 Matt

猫头鹰对video demo网站实际上has a style for .item-video

.owl-carousel .item-video{height:300px}

它添加到自己的CSS，和您的视频会显示出来，如果你使用相同的标记的视频演示。

文档上提到的选项没有任何影响，所以我想这可能是猫头鹰2.0出来β（2.0.0 beta.2.4在这个帖子的时候更好的主意）。

videoWidth: false, // Default false; Type: Boolean/Number 
videoHeight: false, // Default false; Type: Boolean/Number

来源

2015-03-20 12:27:28 visitsb

不适用于我。版本2.2.1 – dit 2017-06-03 18:34:35

由于visitsb表示，您可以从CSS设置缩略图高度。你会得到一个黑色背景的旋转木马。文档在mentionned只有当两者都设置（从source code）工作

然而，选项

$('.owl-carousel').owlCarousel({ 
    video: true, 
    videoHeight: 300, 
    videoWidth: 600 
});

与第一溶液的结果是更漂亮。

来源

2015-11-20 23:29:09 gabriel

Visitb的答案中很方便的一点是大多数视频具有设置的宽高比（16：9）。因此，您可以使用普通长宽比CSS填充技巧将每个项目视频封装在固定长宽比容器中。

具体地，包裹视频项是这样的：

<div class="fixed-video-aspect"><div class="item-video"> ... </div></div>

然后添加以下CSS固定在16的每个项目：9：

.owl-carousel .fixed-video-aspect { 
    position: relative; 
} 
.owl-carousel .fixed-video-aspect:before { 
    display: block; 
    content: ""; 
    width: 100%; 
    padding-top: 56.25%; 
} 
.owl-carousel .fixed-video-aspect > .item-video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

来源

2016-04-28 02:43:20

可以使用流体宽度视频容器推高度而不是用CSS固定高度。通过这样做，您可以避免任何黑带，并且您的视频将与容器齐平，并在调整大小时保持完美比例。

<div class="owl-carousel owl-theme"> 
    <div class="video-wrapper"> 
     <div class="item-video"> 
      <div class="owl-video" href="//videourl">

您将需要修改项目视频的CSS，因此它会发挥很好。

.owl-carousel .item-video { 
position: absolute; 
height: 100%; 
width: 100%; 
left: 0; 
top: 0; 
}

此外，您还可以使封面图片填充幻灯片并丢失该条纹。

.owl-carousel .owl-video-tn { 
background-size: cover !important; 
}

我使用的视频包装是16x9，但任何流体宽度包装将工作。这是我用过的。

.videoWrapper { 
position: relative; 
padding-bottom: 56.25%; /* 16:9 */ 
padding-top: 25px; 
height: 0; 
} 
.videoWrapper iframe { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}

来源：https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

来源

2017-05-08 02:43:30 lucidlips

猫头鹰旋转木马不显示视频

回答

相关问题