Conceal YouTube upon opening any model or light box

I have a YouTube video in the center of my page, and when I click on any link from the side navigation, a lightbox appears. However, in IE, the lightbox is behind the YouTube video. I have tried setting the Z-index, but it doesn't seem to work. Is there a way to hide the YouTube video when the lightbox is opened?

Thank you in advance.

Update:


(function(){
    CKEDITOR.dialog.add('youtube', function(editor) {
        return {
            title: editor.lang.youtube.title,
            minWidth: CKEDITOR.env.ie && CKEDITOR.env.quirks ? 368 : 350,
            minHeight: 240,
            onShow: function() {
                this.getContentElement('general', 'content').getInputElement().setValue('')
            },
            onOk: function() {
                var id = params_from_url("v", this.getContentElement('general', 'content').getInputElement().getValue());
                var text = '';
                this.getParentEditor().insertHtml(text)
            },
            contents: [{
                label: editor.lang.common.generalTab,
                id: 'general',
                elements: [{
                    type: 'html',
                    id: 'pasteMsg',
                    html: '<div style="white-space:normal;width:500px;"><img style="margin:5px auto;" src="'+CKEDITOR.getUrl(CKEDITOR.plugins.getPath('youtube')+'images/youtube_large.png')+'"><br />'+editor.lang.youtube.pasteMsg+'</div>'
                },{
                    type: 'html',
                    id: 'content',
                    style: 'width:340px;height:90px',
                    html: '<input size="25" style="'+'border:1px solid black;'+'background:white">',
                    focus: function() {
                        this.getElement().focus()
                    }
                }]
            }]
        }
    })
    function params_from_url(name, url)
    {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( url );
        if( results == null )
            return name;
        else
            return results[1];
    }
})();

Answer №1

When embedding your YouTube video as an object, be sure to specify the wmode as opaque

<object height="390" width="480" wmode="opaque">

This simple adjustment should resolve any related problems.

Alternatively, you can choose to hide certain elements that are prohibited when your thickbox is activated.

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

State variable in Redux is not defined

While there have been numerous similar inquiries on this platform, I haven't been able to find a solution to my particular issue. Below is the React component in question: class MyTransitPage extends Component { componentDidMount() { this.pro ...

Can you explain the use of the 'this' keyword in map() and call() functions?

Recently, I've been revisiting my understanding of how to use call() and map() with a NodeList in JavaScript. It was quite easy to find information on how call() works, and there are plenty of examples of how it can be used with map(). However, whil ...

Jquery UI sortable can determine the vertical orientation, either moving items up or down

I am having difficulty determining the direction in which axis N is moving, whether up or down. I would also like the elements (h2 and p) inside to remain in their positions. Can anyone provide assistance? http://jsfiddle.net/zerolfc/y62awe4u/2/ <div ...

Leveraging PHP functions for form validation

Previously, the code worked flawlessly until I integrated it into functions. Now, I am struggling to get this form to function correctly with the functions I created. It seems that passing variables and implementing the main logic are key steps, but I&apos ...

Display a particular div upon clicking a specific link, while concealing the other divs

As a beginner in the world of jQuery and coding, I'm encountering some difficulties that I need help with. My goal is to have the 'Vlogging' link activated and show 'Details 1' when the page loads. Then, upon clicking on either &a ...

Angular popup window can't access DOM elements

Hey there, currently experimenting with an angular modal instance and running into a bit of a hurdle. When attempting to declare a querySelector in the modal controller, I'm encountering a console error stating 'Cannot read property 'queryS ...

Executing a function within JSX to dismiss a modal in NextJS

I am currently utilizing the Tanstack React Query library to perform a POST request from a Modal that includes a form: const addDay = (day: TDay) => { const apiURL = process.env.NEXT_PUBLIC_SERVER_URL const queryURL = apiURL + router ...

Combining res.render and redirect in Express.js for efficient rendering and redirection

I am currently developing a web application that involves setting up routes for user authentication. The Challenge: After a successful registration, I want to redirect the user to /login page while also including render options. However, when I use render ...

"Despite being higher in position, the z-index is causing the element to be placed below

I am currently facing an issue with a dropdown menu that I am trying to add to a WordPress site using Visual Composer. The problem arises when I attempt to place the dropdown on top of a parallax section below it. Despite setting the z-index of the paralla ...

Obtain the value stored in the variable named "data"

I'm trying to calculate the sum of data values using jQuery, similar to this example: { label: "Beginner", data: 2}, { label: "Advanced", data: 12}, { label: "Expert", data: 22}, and then add them together. Like so: var sum = data1+data2+dat ...

Start a server without the need to access it through a web browser

On my back-end server (PHP 7.2), I am calling a .php file from index.html every few seconds. <!DOCTYPE html> <html> <head> <title>Title of the document</title> <script src="https://ajax.googleapis.com/ajax/libs/jqu ...

Guide to utilizing element reference with material UI components in Angular

I am facing difficulty in accessing the reference of an element. My intention is to wrap the material UI elements within a div and set the opacity: 0 so that it remains hidden in the HTML, allowing me to handle the value in my component.ts file. The main g ...

What is the best way to align a div of variable size in a container of variable size using CSS?

My website features a 3-level structure that consists of a "workingArea" and an "imageContainer" within it, containing an image. <div class="workingArea"> <div class="imageContainer"> <img class="theImage" /> </div> </div> ...

Tips for aligning elements of varying heights

Currently, I am tackling a responsive web design challenge involving floating multiple items in 4 columns side by side. The issue arises due to the varying heights of these items, causing the floating to behave improperly. Here is the current problem illu ...

Encountering a ReferenceError message that says "readFile is not defined

Currently, I am in the process of learning Node.js and encountering an issue. When I type 'node .' in the terminal, I receive a ReferenceError: readFile is not defined message. Below is the code snippet: const express = require("express"); co ...

Initiating a click function for hyperlink navigation

Here is the HTML and JavaScript code that I am currently working with: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <a href="#f ...

Creating easy nested list views in React Native using object data structures

I am working with an array of objects that contains user data like this: const userList = [ { "firstName": "John", "lastName": "Doe", "date": "19 March 2018" }, { "firstName": "Anna", ...

Utilizing AJAX in Wordpress to Dynamically Update HREF Links

My website now has AJAX functionality, and you can see a live example at www.mathewhood.com. I am interested in changing the URL format when clicked from To something like , without the /sitefiles/ for security reasons. Below is my code. If anyone is ex ...

Use Typescript in combination with React/Redux to showcase a dynamic table on the

Looking to create a React TypeScript Redux application that showcases a table using an API endpoint provided at https://example.com/users The goal is to construct a table with 4 columns: Name, Email, City, and Company, utilizing the API response to popula ...

Steps to create a "reset fields" option for specific input fields

Is there a way to create a link that clears the input fields in a specific column? I have managed to style a button to look like a link: <input type="reset" value="clear fields" style=" background:transparent; border: none; color:blue; cursor:pointer"& ...