1

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

4

2 回答 2

0

这里有一个非常好的（可接受的）解决方法的笔：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 伪类在播放按钮周围创建一个不可见区域，然后捕获触摸交互。

于 2021-01-04T13:02:56.663 回答
-1

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

于 2017-07-01T03:51:15.977 回答