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

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>

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

  1. Pingback: stromectol coupons
  2. Hiya! Quick question that’s entirely off topic. Do you know
    how to make your site mobile friendly? My weblog looks weird when viewing from my apple iphone.
    I’m trying to find a theme or plugin that might be able to correct this issue.
    If you have any suggestions, please share. Cheers!

    Reply
  3. Wonderful blog! I found it while browsing on Yahoo News.
    Do you have any tips on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there!
    Cheers

    Reply
  4. I have been browsing online more than 2 hours today,
    yet I never found any interesting article like yours.
    It’s pretty worth enough for me. Personally, if all
    website owners and bloggers made good content as you did, the internet will be a lot
    more useful than ever before.

    Reply
  5. Great goods from you, man. I’ve understand your
    stuff previous to and you’re just too great. I really like what you have acquired here, certainly like what you are saying and the way in which you say it.
    You make it entertaining and you still care for to keep it smart.

    I cant wait to read far more from you. This is actually a wonderful website.

    Reply
  6. With havin so much written content do you ever run into any issues of plagorism
    or copyright infringement? My site has a lot of unique content I’ve either written myself or outsourced but it seems
    a lot of it is popping it up all over the web without my permission. Do you know any methods to help reduce
    content from being ripped off? I’d definitely appreciate it. http://ciaalis2u.com/

    Reply
  7. Pingback: male viagra

Leave a Comment