我有一个由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?