Question

我有一个我想要显示的YouTube视频，但它根本没有显示。我没有为视频添加高度或宽度，因为我想让它保持响应。

http://www.owlcarousel.owlgraphic.com/demos/video.html

<div id="carousel" class="owl-carousel">
  <div>
    <a class="owl-video" href="https://www.youtube.com/watch?v=Oy9GFAQ4x4w"></a>
  </div>
  <div><img src="http://cdn.playbuzz.com/cdn/7a7a5814-ed79-410c-b748-db6a24f73f0b/4d71c010-f930-4334-ba62-79d87a7ddef4.jpg"></div>

</div>

http://jsfiddle.net/nLz17fcv/12/

Answer 1

使用a标记添加视频似乎无效。

<div>
    <a class="owl-video" href="https://www.youtube.com/watch?v=Oy9GFAQ4x4w"></a>
</div>

相反，您可以将其替换为Iframe以嵌入您想要的视频。

<div class="item-video">
   <iframe width="420" height="315" src="https://www.youtube.com/embed/Oy9GFAQ4x4w">
   </iframe>
</div>

此外，我已移除transitionStyle: "fade"，因为此属性会阻止转盘过渡。

您可以在DEMO

上查看

希望它有助于

Answer 2

在我的情况下，错误是由创建iframe时生成的URL引起的，我在YouTube iframe的前面放置了“ https：//”，并更改了一些内容（添加了“ https：”）

<pre>
if (video.type === 'youtube') {
html.attr( 'src', 'https://www.youtube.com/embed/' + video.id );
} 
else if (video.type === 'vimeo') {
html.attr( 'src', 'https://player.vimeo.com/video/' + video.id );
}
</pre>

我为vimeo视频做的另一件事是添加了“ https：”

<pre>
url: 'https://vimeo.com/api/v2/video/' + video.id + '.json',
</pre>

OwlCarousel Youtube视频没有显示

2 个答案: