z-index和iFrames！ [英] z-index and iFrames!

问题描述

我为我网站的某些图片使用了 FancyBox 插件。在我的其中一页上，我还有来自YouTube的嵌入式iFrame代码，可以在页面上放置视频。

在同一页面上有一个缩略图，当点击时，FancyBoxes显示图像。但是，嵌入的YouTube视频仍然覆盖FancyBox图像。我做了一些Z-index试验，但仍然没有运气。

iFrame是否具有在页面中的所有元素（即使使用z-index集合等）的资历？

解决方案

将 wmode = transparent 添加为参数。

Html解决方案

 < iframe title =YouTube视频播放器
 width =480height =390
 src =http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent
 frameborder =0
> 
  

jQuery解决方案：

  $（document）.ready（function（）{
 $（'iframe'）。each（function（）{
 var url = $（this）.attr（src ）; 
 $（this）.attr（src，url +？wmode = transparent）; 
}）; 
}）; 
  

来源 http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix

I'm using the FancyBox plugin for some of my site's images. On one of my pages, I also have the embedded iFrame code from YouTube to place a video on the page.

On this same page is a thumbnail that, when clicked, FancyBoxes the image. However, the embedded YouTube video still lays over the FancyBox image. I did a bit of z-index experimenting and still no luck.

Does an iFrame have seniority over all elements in a page even with z-index set, etc.?

解决方案

Add wmode=transparent as param.

Html solution

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

jQuery solution:

$(document).ready(function () {
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Source http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix

这篇关于z-index和iFrames！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！