Why doesn't the div click event trigger when the mouse hovers over an iframe?

My dilemma involves a div element with a click event. When the div is positioned over an iframe area (closer to the user than the iframe), the click event fails to trigger. However, if the div is located elsewhere and not above the iframe, the click event works as intended.

P.S.1. The iframe in question contains a YouTube video from a different domain.
P.S.2. Interestingly, when using an input[type="button"] element instead of a div, the click event does trigger.
P.S.3. So why use a div and not a button? Well, I need to implement drag events with the div element (and another element) which would be impossible with a button.

I have attempted the following:

  • Placing a transparent screen overlay between the div and the iframe - without success;
  • Investigating what might be intercepting the click event - to no avail.
javascriptjqueryhtmlcssiframe

Answer №1

Include the wmode attribute with two possible parameters:

&wmode=Opaque
&wmode=transparent

For example, in an iframe like this:

<iframe title="YouTube video player" width="480" height="390" 
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent"
frameborder="0" wmode="Opaque">

For more information, check out THIS LINK.

For those using jQuery:

$(document).ready(function(){

$('iframe').each(function(){
       var url = $(this).attr("src");
       var char = "?";
       if(url.indexOf("?") != -1){
               var char = "&";
        }

       $(this).attr("src",url+char+"wmode=transparent");
 });

 });

Answer №2

I gave this a shot and it worked like a charm flawlessly:

<iframe width="560" height="315" src="//www.youtube.com/embed/abc123" frameborder="0" allowfullscreen></iframe>

<div style="position: absolute; top: 10px; background: blue; padding: 20px;" onclick="alert('Click!')">click here</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I conceal the source code of my website on Joomla 1.5?

Is there a way to protect my website's source code from being accessed by users? For example, preventing right-clicks on the page like this: If hiding the entire source code is not possible, is there a way to conceal specific parts of it? Specificall ...

jqueryxcodejoomlaobfuscation

I am looking to bring in just the tables from a different html/php page

I am currently working on a webpage that includes a php library, header, and other elements. I only need to import specific tables and information from this page onto another screen display, with the tables arranged side by side instead of vertically. My ...

phphtmlcss

Is there a way to achieve a double background color effect in CSS while ensuring that the text is centered within the second background color element?

How can I achieve a layout similar to the one shown in this image: ul menu li tags Should I use two tags for each element? Here is an example: <ul class="menu"> <div class="outside"><li class="inside"><a href="#">Firefox</a ...

htmlcsshtml-listsmenuitem

arranging the divs based on the space allocation within the page

Is there a way to neatly organize the divs on a page, depending on available space? I want them to align horizontally if there is enough room before moving to the next line. The tab-content parent div may contain several divs. Any suggestions on how this c ...

htmlcss

Display a loading screen while transitioning between routes in Angular 2

Is there a way to implement a loading screen for route changes in Angular 2? ...

htmlcssangularangular2-routing

I have an empty array that needs to be filled with numbers

Currently, I am facing a challenge where I have an empty array and need to insert numbers from 1 to 20 into it. Once that is complete, the next step is to calculate the total sum of all these numbers. The stumbling block I am encountering lies in this sect ...

javascript

How to invoke PHP script through AJAX using jQuery

I am attempting to send a parameter through AJAX from jQuery and use a specific SQL query based on the value of that parameter. I then want to receive the response from the PHP page called via AJAX. My question is why this code isn't functioning as ex ...

phpjquerysqlajax

Is there a way to position a pseudoelement behind its parent yet still in front of its grandparent using absolute positioning?

Imagine the following scenario: <div id="one"/> <div id="two"> <div id="three"/> </div> <div id="four"/> I am trying to apply a pseudoelement to three that appears behind it but in front of two (and any other ancestors if ...

htmlcssz-indexpseudo-element

CKEditor5: Unable to access the 'pluginName' property because it is undefined

I am facing a challenge in creating a custom image plugin for CKEditor that can seamlessly integrate with my own image upload system. While trying to set up this plugin, I encountered some difficulties. Oddly enough, the "out-of-the-box" plugins work perfe ...

javascriptckeditor

Tips for efficiently implementing AJAX requests for multiple forms within a single webpage

Previously, I had a form where clicking submit would hide the form and display the result on a div with classname=dig. However, after adding more forms, all the forms started submitting at the same time instead of individually. How can I fix this issue in ...

javascriptjqueryhtmlajax

Displaying AJAX response with AngularJS

My Angular script structure is shown below: var myapp = angular.module("Demo",["ngRoute"]) .config(function($routeProvider){ $routeProvider .when ...

javascriptjqueryangularjsajax

Exploring Node troubleshooting with WebPack and Feathers

Currently, I am part of a team working on a project that involves using Node, Webpack, TypeScript, and Express/Feathers. While my fellow developers are experienced in these technologies, I have limited experience with JavaScript mainly on the client-side a ...

javascriptnode.jsnpmwebpacknode-debugger

Extract data from the DOM in JSON format

Upon pressing Ctrl+U, I discovered the following JSON in the DOM of my page: <script type="text/x-magento-init"> { "#country": { "regionUpdater": { "optionalRegionAllowed": true, "regionL ...

jqueryjsonmagento2

Styling menus with CSS

I'm struggling with a CSS issue while attempting to add a 1px solid black line after each element in my drop-down table menu. The current appearance of my menu is causing some trouble. What I desire for it to look like involves applying border: 1px s ...

htmlcss

Invoke two functions simultaneously on a single Onchange event

Can someone help me understand how to trigger two functions by changing the value of a specific dropdown list using the "OnChange" event in Ajax? Note: The system typically only displays the output of the showhistory() function. Here is my existing code: ...

javascriptphpjqueryajax

What is the method by which a server sends data to a client in long polling without the client

My current method of requesting data from the server via ajax in intervals feels too easy and lazy for achieving real-time effects. I am now considering switching to long polling or comet techniques because they encourage the server to push data when avai ...

jqueryajaxreal-timecometlong-polling

Using Jquery to enhance navigation tabs with pointers

I am facing an issue where the class .hover and .over are added to the entire list whenever I mouseover any list item. I understand that this is happening due to my jQuery code, but I would like to find a way for jQuery to only add the class to the specifi ...

jquerycsssprite

Generate random div elements and insert them dynamically into a fixed-sized container using AngularJS. The number of div elements created can range anywhere from 0 to

Within a div of fixed size, dynamically generated div elements are displayed using ng-repeat. The inner divs should adjust their size to accommodate the number of child divs present - for example, if only one div is present, it should take up 100% of the s ...

javascriptangularjs

I'm having trouble with my dataTable creation using JQuery. Can anyone help me troubleshoot?

I've attempted various methods to make this work. Here's what I'm importing: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script type="text/javascript" src="https://cdn.datatabl ...

jqueryarraysjsonajaxdatatable

Can we leverage Angular service styles in scss?

I am working on a change-color.service.ts file that contains the following code snippet: public defaultStyles = { firstDesignBackgroundColor: '#a31329', firstDesignFontColor: '#ffffff', secondDesignBackgroundColor: '#d1 ...

cssangulartypescriptsass