如何添加在悬停时触发视频播放的覆盖 - 现在覆盖在悬停时阻止播放答案

【问题标题】：how to add an overlay that triggers video play on hover -- now the overlay is blocking play on hover如何添加在悬停时触发视频播放的覆盖 - 现在覆盖在悬停时阻止播放
【发布时间】：2021-04-17 06:47:52
【问题描述】：

我有悬停时播放的视频，但我使用的叠加层阻止了此功能。我想在视频上弹出一个带有文本的不透明叠加层，它仍然在悬停时播放。所以我的问题是如何添加不会阻止悬停播放的文本和不透明叠加层。

参考：https://axisstudiosgroup.com/work/

我正在使用以下内容：

js:

jQuery(document).ready(function($){

    var oPlayer = $("#" + this.id);
  $('.work-grid .work-item').on('mouseenter', '.play-video', function(e) {
    e.preventDefault();

    oPlayer = $(this);
    froogaloop = $f(oPlayer[0].id);
    froogaloop.api('play');
  }).mouseleave(function() {

    froogaloop = $f(oPlayer[0].id);
    froogaloop.api('pause');
    froogaloop.api("seekTo", 0);
  });
});

css:

.work-grid {
    display: grid;
    grid-row-gap: 25px;
    width: 100%;
    margin-bottom: 80px;
  } 
    
.work-item {
  position: relative;
  margin-top: 0px;
  overflow: visible;
}

.work-wrap {
  position: relative;
  padding-bottom: 58.25%;
}

.work-item iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.125rem solid transparent;
  
}

.work-item img {
  display: block;
  height: auto;
  max-width: 100%;
  height: 100%;
  width: 100%;
}

html

<div class="work-grid">
    <div class="work-item">
        <div class="work-wrap">
           <a href="#">
               <div class="work-item-overlay">
               </div>
                   <div>
                    <iframe id="player1" class="play-video" src="https://player.vimeo.com/video/#?api=1&player_id=player1&title=0&byline=0&portrait=0&autoplay=0&background=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                   </div>
                   <div class="work-item-details">
                     <h3 class="work-item-title">Title</h3>
                   </div>
            </a>
        </div>
    </div>

【问题讨论】：

标签： javascript hover vimeo

【解决方案1】：

其实这个问题可以通过简单的将叠加层 div 移动到不同的位置来解决。

<div class="work-item">
    <div class="work-wrap">
       <a href="example.com">
             <div>
                <iframe id="player29" class="play-video" src="https://player.vimeo.com/video/#?api=1&player_id=player29&title=0&byline=0&portrait=0&autoplay=0&muted=1&background=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
             </div>
               <div class="work-item-details">
               <div class="work-item-overlay">
                 <h3 class="work-item-title">TITLE</h3></div>
               </div>
        </a>
    </div>
</div>

【讨论】：