使用嵌入 Flickity 插件的 Youtube 视频答案

【问题标题】：Using Youtube video embed with Flickity plugin使用嵌入 Flickity 插件的 Youtube 视频
【发布时间】：2017-12-04 19:25:09
【问题描述】：

我有一个由 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我的轮播，因为它会播放/暂停视频，但会将视频保持在同一位置，即我无法选择它。有什么想法吗？

【问题讨论】：

标签： javascript jquery html css flickity

【解决方案1】：

这里有一支笔具有非常好的（可接受的）解决方法：https://codepen.io/JasonTheAdams/pen/OBPPKW

SCSS 提取：

.video-wrap {
  position: relative;
  width: 100%;
  height: 400px;
  iframe {
    position: absolute;
    top: 0;
    left :0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  &__grippy {
    position: absolute;
    left: 0;
    width: calc(50% - 50px);
    top: 0;
    bottom: 0;
    border: 2px solid green;
    z-index: 3;

    &:before {
      position: absolute;
      display: block;
      content: '';
      width: 60%;
      height: 35%;
      top: 0;
      left: 100%;
      border: 2px solid green;
    }

    + .video-wrap__grippy {
      left: auto;
      right: 0;
      &:before {
        bottom: 0;
        top: auto;
        right: 100%;
        left: auto;
      }
    }
  }
}

不是我的笔，但我遇到了同样的问题并决定使用这支。

解压：它在视频上创建两个 div，使用 :before 伪类在播放按钮周围创建一个不可见区域，然后捕获触摸交互。

【讨论】：

【解决方案2】：

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

【讨论】：

pointer-events: none; 有效。的种类。你可以滑动，但你不能再开始视频了。所以这绝对不是最好的解决方案：D