Issue with Z-index and wmode when using YouTube embed code on IE10

I am currently working on developing a div element that will prevent a YouTube video embedded in an iframe from playing when clicked. Instead, I want to trigger a JavaScript function upon user interaction. I have added the wmode=opaque parameter to the src attribute as recommended by various online resources. While this solution works seamlessly in Chrome and Firefox, it unfortunately fails to work in IE10.

Below is the code snippet I am using:

<div class="cover" onclick="alert('Working');" style="height: 350px; width: 350px;"></div>
<iframe width="350" height="350" frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/18YA73npI6s?wmode=opaque">

And here is the accompanying CSS:

div.cover {
    position: absolute;
    z-index: 100;
}
iframe {
    z-index: 1;
}

You can view the above code in action here.

If you have any insights on why this workaround does not function properly in IE10, I would greatly appreciate your input.

javascripthtmlcssyoutubewmode

Answer №1

I had to find a solution and this was the best one

http://jsfiddle.net/azXe6/2/

div.cover {
position: absolute;
z-index: 100;
background-color:red;  /* added this*/
opacity:0; /* added this*/
}

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

Importing a file using its absolute path in JavaScript

Within the dependencies directory, there exists a module named foo: import foo from '../dependencies/foo'; // This import statement works as intended The challenge arises when attempting to import from a different path due to deployment in an AW ...

javascripttypescript

Differences between using CSS properties and AngularJS filters:CSS properties

When working on an angularjs application, one task may be to convert a string to uppercase. There are 2 options available to achieve this, both yielding the same result. However, it is important to consider the scenarios in which one option may be preferre ...

cssangularjs

What could be causing the JavaScript array to not successfully transfer to PHP?

Despite searching for solutions, I am unable to get the desired outcome. When I check my JavaScript array in the console, it appears like this: [] 0:Object stock:27 createdtime:"2016-04-08T04:00:00+0000" id:"693852404037393999" units:438 ...

javascriptphparraysjsonajax

The Typescript counterpart to PropTypes.oneOf, utilizing a pre-existing variable

While I know this question has been addressed on Stack Overflow here, I still find myself struggling with a similar issue in my TypeScript project. Currently, I am in the process of converting a JavaScript project to Typescript. Within one of my React com ...

javascriptreactjstypescriptreact-proptypes

What is the reason behind Chrome's automatic scrolling to ensure the clicked element is fully contained?

Recently, I have observed that when performing ajax page updates (specifically appends to a block, like in "Show more comments" scenarios) Chrome seems to automatically scroll in order to keep the clicked element in view. What is causing this behavior? Wh ...

javascripthtmlcsschromium

An even flexbox grid featuring content of varying sizes and dividers

I am currently in the process of working on a .psd template and utilizing Bootstrap 4. I have encountered an issue with one section that contains multiple rows and columns with varying content. The main problem is with one column where the text inside the ...

htmltwitter-bootstrapcssflexbox

How does the object scope receive, process, and prepare the update for display within the AngularJs view?

AngularJS allows for data-binding to easily display immediate data in our View. This is made possible by the object scope, which acts as a connector between the Logic Code and The View. Additionally, AngularJs supports two-way binding. My question is: H ...

javascriptangularjsangularjs-scope

Update the index of each list object and then add them to the Angular controller

Currently, I am working on integrating Spring with AngularJS. In my setup, I have a Spring controller returning a List object to the Angular controller. When I print the List in the Spring controller console, it appears as follows: [org.com.pro.dto.MyDTO ...

htmlangularjsspring-mvc

Is it the same item in one situation, but a completely different item in another?

I am currently investigating the behavior of objects in JavaScript, particularly when it comes to copying one object onto another. It seems that sometimes they behave as if they are the same object, where modifying one also modifies the other. Many resourc ...

javascriptvue.jsvue-component

Solving layout issues / Techniques for determining element heights

This new question is in relation to my previous one: How to position relative elements after absolute elements I have updated the JsFiddle from that question to better represent my current HTML, which I unfortunately do not have a URL for at the moment. Y ...

javascripthtmlcss

WebPack bundling causing issues with Knockout Validation

I am developing a web application using Knockout along with the Knockout-Validation plugin, and I want to utilize WebPack for bundling. However, I encountered an issue where Knockout-Validation seems to break when incorporated with WebPack. To illustrate ...

javascriptknockout.jswebpackknockout-validation

Texture on plane is not displaying properly in Three.JS

Seeking assistance! I've been struggling all day to successfully load a texture onto my plane in Three.JS. Every time I attempt to add the desired link, it either fails or *poof* my plane disappears mysteriously. Please lend me your expertise with Thr ...

javascriptthree.js

What is the reason behind jshint issuing an alert specifically for the lastSelectedRow being

Upon pasting the code below into jshint.com, an error is generated: Read only in reference to line: lastSelectedRow = 1; I am curious as to why this error occurs and how it can be remedied. Interestingly, jslint does not return this error. /*global la ...

javascriptjslintjshint

Client-Side Isomorphic JS: A Guide to Using HTTP Requests

Seeking advice on data population for isomorphic flux apps. (Using react, alt, iso, and node but principles are transferable) In my flux 'store' (), I need to fetch data from an api: getState() { return { data : makeHttpRequest(url) ...

javascriptnode.jsreactjsfluxisomorphic-javascript

Is there a way to take a snapshot of an HTML Canvas frame and showcase it on a Bootstrap modal?

I have a page where users must grant permission for their webcam or camera. Once granted, a webmoji will move according to the user's face position. Below is a button that will turn blue and become active once a face is detected. When clicked, I want ...

javascripthtmlcsscanvasbootstrap-4

Tips for capturing an express proxy error in React?

I set up an express server as a proxy for my React app, but I am facing an issue where I cannot get the error response back in my React code. No matter if I use `return next(err)` or `res.send(err)`, the latter gets stuck in the `then` block and does not t ...

javascriptnode.jsreactjsexpressaxios

What are some creative ways to design the selected tab?

In my Vue parent component, I have multiple child components. There are several elements that toggle between components by updating the current data. The issue is that I am unsure how to indicate which tab is currently active. I've tried various li ...

javascripthtmlcssvue.js

Developing a website using custom modules in Node.js and Express framework

I am currently encountering an issue when using a custom module within one of my route functions in Express with node. Below is my current setup: In the app.js file, I require the module as follows: c_controller = require( './core/c_controller' ...

javascriptnode.jsexpress

How come the width of an element with a relative position remains maximized even when it does not have any child elements?

I am facing an issue with a "message" element that needs to be resized if the text exceeds its width within certain limits, similar to how it works in messaging applications. .message { position: relative; color: white; background: #182533 ...

htmlcss

Attempting to iterate through and retrieve the names listed in the table

I have a code that I need help with in extracting names from td elements using jQuery. In certain instances, if the td is empty, I want to merge the left-side td with the 5 right-side tds because the first td on the right side is empty and the second td c ...

javascriptjquery