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

问题描述

我正在使用 FancyBox 插件来处理我网站的一些图片.在我的一个页面上，我还有来自 YouTube 的嵌入式 iFrame 代码，用于在页面上放置视频.

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.

在同一页面上有一个缩略图，当点击时，FancyBoxes 图像.但是，嵌入的 YouTube 视频仍然位于 FancyBox 图像上.我做了一些 z-index 实验，但仍然没有运气.

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.

即使设置了 z-index 等，iFrame 是否对页面中的所有元素都具有优先级?

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

推荐答案

添加 wmode=transparent 作为参数.

HTML 解决方案

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

jQuery 解决方案:

jQuery solution:

$(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

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