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屋!