how to add an overlay that triggers video play on hover — now the overlay is blocking play on hover

February 16, 2021 by admin

I have videos that play on hover but the overlays I use block this function. I’d like to have an opaque overlay with text pop up over the video and it still plays on hover. So my question is how can I add a text and opaque overlay that doesn’t block the play on hover.

reference: https://axisstudiosgroup.com/work/

I am using the following:

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>

23 thoughts on “how to add an overlay that triggers video play on hover — now the overlay is blocking play on hover”

Actually, this was solved by simply moving the overlay div to a different position.

<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>