我有一个由Flickity插件提供支持的小型画廊,其中包含图像,并且YouTube将视频嵌入其中。标记类似于:

<div class="carousel">
  <div class="carousel-cell">
    <img src="https://img.youtube.com/vi/EXeTwQWrcwY/maxresdefault.jpg">
    <iframe src="https://www.youtube.com/embed/EXeTwQWrcwY"></iframe>
  </div>
</div>


预览图像设置了单元格的大小,而Youtube iframe的位置绝对可以覆盖单元格:

> iframe {
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
}


问题是,单击嵌入的视频时,我实际上无法drag轮播,因为这会播放/暂停视频,但将视频保持在同一位置,即我无法选择它。有任何想法吗?

最佳答案

您是否尝试过将pointer-events: none;添加到iframe?

09-10 10:33
查看更多