Video Overlay Hidden Behind YouTube Playback

Question

Video Overlay Hidden Behind YouTube Playback

I'm currently facing an issue with my website that includes a YouTube video. Whenever I try to open a popup window using JavaScript, it appears behind the YouTube video instead of on top. I have attempted to adjust the z-index in my JavaScript function by adding element.style.zIndex="1" or object.style.zIndex="1", and also set z-index:-1; in my YouTube CSS, but unfortunately, it hasn't resolved the problem. Can anyone suggest what steps I should take next?

YouTube CSS:

position: absolute;
height: 259px;
width: 683px;
left: 235px;
float: left;
text-align: right;
z-index: -1;

YouTube code:

<div id="youtube_video" style="float: right">
<object width="580" height="259" float="right"><param name="movie" value="http://www.youtube.com/v/7mKpzQOlyKE?fs=1&hl=iw_IL"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/7mKpzQOlyKE?fs=1&hl=iw_IL" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="580" height="259"></embed></object>

javascript html css

Answer 1

Answer №1

Try inserting wmode="opaque" into the parameters of the <object> / <embed> tags to determine if it provides any assistance.

Answer 2

Try inserting wmode="opaque" into the parameters of the <object> / <embed> tags to determine if it provides any assistance.

Answer 3

Answer №2

This is a common issue that can easily be resolved. You can use a lightbox or something similar to address it. One way to handle this situation is by creating a function on the event start (when the lightbox is shown), where you hide the object, like so: (I've placed the YouTube video inside a div with the class name "ToHide")

$(".ToHide").hide();

Then, I recommend registering an event on the lightbox (on closed). When this event is triggered, you can show the hidden object using the following code:

$(".ToHide").show();

And that's all! Problem solved :)

Answer 4

This is a common issue that can easily be resolved. You can use a lightbox or something similar to address it. One way to handle this situation is by creating a function on the event start (when the lightbox is shown), where you hide the object, like so: (I've placed the YouTube video inside a div with the class name "ToHide")

$(".ToHide").hide();

Then, I recommend registering an event on the lightbox (on closed). When this event is triggered, you can show the hidden object using the following code:

$(".ToHide").show();

And that's all! Problem solved :)

Answer 5

Answer №3

The issue lies within the flash player, as it is programmed to operate in an overlay mode that does not take into account sorting or z-index.

To resolve this problem when embedding the flash object, you can include

<param name="wmode" value="opaque" />

in the code, or if using swfobject, use .addParam('wmode', 'opaque');

When dealing with YouTube videos, simply add wmode="opaque" to the embed element.

Answer 6

The issue lies within the flash player, as it is programmed to operate in an overlay mode that does not take into account sorting or z-index.

To resolve this problem when embedding the flash object, you can include

<param name="wmode" value="opaque" />

in the code, or if using swfobject, use .addParam('wmode', 'opaque');

When dealing with YouTube videos, simply add wmode="opaque" to the embed element.

Answer 7

Answer №4

Discover how to resolve overlay and z-index issues with YouTube iframes by visiting the following link:

The main idea is...

Answer 8

Discover how to resolve overlay and z-index issues with YouTube iframes by visiting the following link:

The main idea is...

Answer 9

Answer №5

<script language="javascript"> 
function playYouTube(id){ 
  //Customizing YouTube Player Settings 
  var width = 640; 
  var height = 505; 
  var FullScreen = "yes"; 
  var AutoPlay = "yes"; 
  var HighQuality = "yes";

  //Determining Page Dimensions 
  var pageWidth = window.innerWidth; 
  var pageHeight = window.innerHeight; 
  if (typeof pageWidth != "number"){ 
    if (document.compatMode == "CSS1Compat"){ 
      pageWidth = document.documentElement.clientWidth; 
      pageHeight = document.documentElement.clientHeight; 
    } else { 
      pageWidth = document.body.clientWidth; 
      pageHeight = document.body.clientHeight; 
    } 
  } 
  // Display Background 
  var background = document.getElementById('bg'); 
  background.style.visibility = "visible"; 

  //Creating a New Div for YouTube Popup 
  var divElement = document.createElement('div'); 
  divElement.setAttribute('id',id); 
  divElement.className = "popup"; 
  divElement.style.visibility = "visible"; 
  var divWidth = width + 4; 
  var divHeight = height + 20; 
  divElement.style.width = divWidth + "px"; 
  divElement.style.height = divHeight + "px"; 
  var divLeft = (pageWidth - divWidth) / 2; 
  var divTop = (pageHeight - divHeight) / 2 - 10; 
  divElement.style.left = divLeft + "px"; 
  divElement.style.top = divTop + "px"; 

  //Create Close Button Div 
  var closeButton = document.createElement('div'); 
  closeButton.style.visibility = "visible"; 
  closeButton.innerHTML = "<span onclick=\"closeYouTube('" + id +"')\" class=\"close_button\">X</span>"; 
  divElement.appendChild(closeButton); 

  //Create YouTube Video Div 
  var youtubeDiv = document.createElement('div'); 
  youtubeDiv.setAttribute('id', "yt" + id); 
  youtubeDiv.className = "ytcontainer"; 
  youtubeDiv.style.width = width + "px"; 
  youtubeDiv.style.height = height + "px"; 
  if (FullScreen == "yes") FullScreen="&fs=1"; else FullScreen="&fs=0"; 
  if (AutoPlay == "yes") AutoPlay="&autoplay=1"; else AutoPlay="&autoplay=0"; 
  if (HighQuality == "yes") HighQuality="&hd=1"; else HighQuality="&hd=0"; 
  var URL = "http://www.youtube.com/v/" + id + "&hl=en&rel=0&showsearch=0" + FullScreen + AutoPlay + HighQuality; 
  var YouTubeEmbed = "<object width=\"" + width + "\" height=\"" + height + "\">";
  YouTubeEmbed += "<param name=\"movie\" value=\"" + URL + "\"></param>";
  YouTubeEmbed += "<param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param>";
  YouTubeEmbed += "<embed src=\"" + URL + "\" type=\"application/x-shockwave-flash\" ";
  YouTubeEmbed += "allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"" + width + "\" height=\"" + height + "\"></embed></object>";
  youtubeDiv.innerHTML = YouTubeEmbed;
  divElement.appendChild(youtubeDiv);

  document.body.appendChild(divElement);
} 
function closeYouTube(id){ 
  var background = document.getElementById('bg'); 
  background.style.visibility = "hidden"; 
  var divElement = document.getElementById(id); 
  var youtubeDiv = document.getElementById("yt" + id); 
  divElement.removeChild(youtubeDiv); 
  document.body.removeChild(divElement);
} 
</script>

<style type="text/css"> 
.popup { position: absolute; z-index: 2; } 
.popup_bg { position: absolute; visibility: hidden; height: 100%; width: 100%; filter: alpha(opacity=70); opacity: 0.7; left: 0px; top: 0px; background-color: #999; z-index: 1; } 
.ytcontainer { border: 2px solid #666; clear: both; } 
.close_button { font-family: Verdana, Geneva, sans-serif; font-size: small; font-weight: bold; color: #666; text-decoration: none; display: block; float: right; background-color: #FFF; z-index: 3; cursor: default; border: 2px solid #666; margin-bottom: -2px; padding: 0px 3px 0px 3px; } 
body { margin: 0px; } 
</style>

and a link to play youtube video in popup

 <a href="#" onclick="playYouTube('_AJ0SkbPxAk')">Stewie Beats Brian</a>

Answer 10

<script language="javascript"> 
function playYouTube(id){ 
  //Customizing YouTube Player Settings 
  var width = 640; 
  var height = 505; 
  var FullScreen = "yes"; 
  var AutoPlay = "yes"; 
  var HighQuality = "yes";

  //Determining Page Dimensions 
  var pageWidth = window.innerWidth; 
  var pageHeight = window.innerHeight; 
  if (typeof pageWidth != "number"){ 
    if (document.compatMode == "CSS1Compat"){ 
      pageWidth = document.documentElement.clientWidth; 
      pageHeight = document.documentElement.clientHeight; 
    } else { 
      pageWidth = document.body.clientWidth; 
      pageHeight = document.body.clientHeight; 
    } 
  } 
  // Display Background 
  var background = document.getElementById('bg'); 
  background.style.visibility = "visible"; 

  //Creating a New Div for YouTube Popup 
  var divElement = document.createElement('div'); 
  divElement.setAttribute('id',id); 
  divElement.className = "popup"; 
  divElement.style.visibility = "visible"; 
  var divWidth = width + 4; 
  var divHeight = height + 20; 
  divElement.style.width = divWidth + "px"; 
  divElement.style.height = divHeight + "px"; 
  var divLeft = (pageWidth - divWidth) / 2; 
  var divTop = (pageHeight - divHeight) / 2 - 10; 
  divElement.style.left = divLeft + "px"; 
  divElement.style.top = divTop + "px"; 

  //Create Close Button Div 
  var closeButton = document.createElement('div'); 
  closeButton.style.visibility = "visible"; 
  closeButton.innerHTML = "<span onclick=\"closeYouTube('" + id +"')\" class=\"close_button\">X</span>"; 
  divElement.appendChild(closeButton); 

  //Create YouTube Video Div 
  var youtubeDiv = document.createElement('div'); 
  youtubeDiv.setAttribute('id', "yt" + id); 
  youtubeDiv.className = "ytcontainer"; 
  youtubeDiv.style.width = width + "px"; 
  youtubeDiv.style.height = height + "px"; 
  if (FullScreen == "yes") FullScreen="&fs=1"; else FullScreen="&fs=0"; 
  if (AutoPlay == "yes") AutoPlay="&autoplay=1"; else AutoPlay="&autoplay=0"; 
  if (HighQuality == "yes") HighQuality="&hd=1"; else HighQuality="&hd=0"; 
  var URL = "http://www.youtube.com/v/" + id + "&hl=en&rel=0&showsearch=0" + FullScreen + AutoPlay + HighQuality; 
  var YouTubeEmbed = "<object width=\"" + width + "\" height=\"" + height + "\">";
  YouTubeEmbed += "<param name=\"movie\" value=\"" + URL + "\"></param>";
  YouTubeEmbed += "<param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param>";
  YouTubeEmbed += "<embed src=\"" + URL + "\" type=\"application/x-shockwave-flash\" ";
  YouTubeEmbed += "allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"" + width + "\" height=\"" + height + "\"></embed></object>";
  youtubeDiv.innerHTML = YouTubeEmbed;
  divElement.appendChild(youtubeDiv);

  document.body.appendChild(divElement);
} 
function closeYouTube(id){ 
  var background = document.getElementById('bg'); 
  background.style.visibility = "hidden"; 
  var divElement = document.getElementById(id); 
  var youtubeDiv = document.getElementById("yt" + id); 
  divElement.removeChild(youtubeDiv); 
  document.body.removeChild(divElement);
} 
</script>

<style type="text/css"> 
.popup { position: absolute; z-index: 2; } 
.popup_bg { position: absolute; visibility: hidden; height: 100%; width: 100%; filter: alpha(opacity=70); opacity: 0.7; left: 0px; top: 0px; background-color: #999; z-index: 1; } 
.ytcontainer { border: 2px solid #666; clear: both; } 
.close_button { font-family: Verdana, Geneva, sans-serif; font-size: small; font-weight: bold; color: #666; text-decoration: none; display: block; float: right; background-color: #FFF; z-index: 3; cursor: default; border: 2px solid #666; margin-bottom: -2px; padding: 0px 3px 0px 3px; } 
body { margin: 0px; } 
</style>

and a link to play youtube video in popup

 <a href="#" onclick="playYouTube('_AJ0SkbPxAk')">Stewie Beats Brian</a>

Video Overlay Hidden Behind YouTube Playback

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Is it possible to duplicate the geometrical shape within the scene?

Design a dynamic tile grid layout using CSS Grid that adapts to different

Two separate projects targeting Admin and User interfaces versus a unified application featuring distinct themes for each user role

I encountered an issue while trying to integrate react-alert into my React application. An Uncaught Error was thrown, stating that objects are not valid as a React

Is it possible to log messages to the Selenium RC log using JavaScript in Selenium?

Setting up xlsx for converting Excel spreadsheets to JSON format

Develop a list of findings from the search

What could be the reason for the malfunction of the min value in my Material UI date textfield?

How do I retrieve the HSL value for a color selected using an input of type 'color' in JavaScript?

Sending a parameter to an (internationally?) externalized class

Using react-select to display "N items selected" instead of listing out all the selected items

How come HTML fails to display an image sent through Express?

Unable to associate JSON data using the map method

The focus of the input is lost when the value is being edited, specifically in the case where ngFor and ng

Blank advertisements displayed on WordPress due to Google AdSense malfunction

Extracting input value using HTML and JavaScript

Issue with CSS causing dropdown to open underneath modal

Summernote - Add Text while maintaining formatting requirements

Angular 4 in combination with ngx-datatable is showing a 404 error for the @swimlane/ngx-datatable package

Removing information from a database using the delete function