Home/ Questions/Q 8840449
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T10:28:02+00:00

I have a youtube iframe embedded in a page with a transparent div placed

  • 0

I have a youtube iframe embedded in a page with a transparent div placed exactly on top of it.

I have links in the div on which I use CSS :hover to make visible only while the mouse is over the video.

Is it possible to allow the user to click through the div to play the video without turning off the hover effect on the div? I cannot make the div smaller.

I’m looking for something similar to pointer-events:none but which maintains the hover event for the div element. Is there a javascript solution perhaps?

Code demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video test</title>
<style>
#storymenu{position:absolute; width:515px; height:386px;}
#storymenu a{display:none; margin-left:10px; margin-top:20px; padding:5px; background:#FFF;}
#storymenu:hover a{display:inline-block}
</style>
</head>

<body>
<div id="storymenu">
<a href="#" onclick="alert('next');return(false);"><span>Next Story</span> &gt;</a>
<a href="#" onclick="alert('prev');return(false);">&lt; <span>Prev Story</span></a>
</div>
<iframe width="515" height="386" src="http://www.youtube-nocookie.com/embed/5It4y8834Zd" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here you go…

    Here is a Working Fiddle

    CSS

    #video {
width:500px;
height:200px;
background-color:#333333;
display:block;
position:absolute;
left:0px; top:0px;
z-index:1;
}

#video a {
color:#ffffff;
}

#overlay{
display:none;
position:absolute;
left:30px; top:50px;
z-index:5;
}

#overlay a {
color:orange;
}

    HTML

    <div id='holder'>
<div id='video'><a href=''>Link</a></div>
<div id='overlay'><a href=''>Overlay Link</a></div>
</div>

    JQuery

    $('#holder').on('mouseenter', function(){
$('#overlay').fadeIn(250);
});

$('#holder').on('mouseleave', function(){
$('#overlay').fadeOut(250);
});
    • 0