Я пытаюсь расположить блок поверх iframe, чтобы тот реагировал на действия пользователя и перенаправлял события в iframe, расположенный под ним.
Это выглядит примерно так:
<html>
<head>
<style type="text/css">
#hideme{
background: #000;
z-index: 100;
position: absolute;
opacity: 0.0;
}
iframe{
position: absolute;
top: 100px;
left: 350px;
}
</style>
</head>
<body>
<iframe width="853" height="480" src="//www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
<div id="hideme"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('iframe').load(function(){
var iframe = $(this);
var hideme = $('#hideme');
hideme.width(iframe.width());
hideme.height(iframe.height());
hideme.css('left', iframe.position().left);
hideme.css('top', iframe.position().top);
hideme.on("click", function(event){
iframe.trigger(event);
});
});
</script>
</body>
</html>
Очевидно, с помощью trigger я не могу "отправить" событие айфрейму. Может кто-нибудь пояснить, почему это не работает, и вообще, возможно ли это.