0

我一直在研究这里特色的自定义图像滑块：

jQuery

$(function(){
      $('.cont:gt(0)').hide();
      $("#parent").on("mouseenter", ".extraContent div", function(){
           var ind = $(this).index();
           $("#parent").find(".cont").stop().fadeTo(600,0,function(){
               $('#parent').find('.cont').eq(ind).stop().fadeTo(300,1);
           });
        });
        $('#parent .extraContent').on('click',function(){
             window.location=$(this).find("a").attr("href"); 
             return false;
        });
    });

CSS

​#parent { width:400px; margin:auto}
.mainContent { width:430px; height:300px; border:1px solid #000;padding:5px; }
.extraContent {overflow:auto; width:450px;}
.extraContent div{float:left; width:90px; height:90px; border:1px solid #00F; margin:5px; padding:5px }
.extraContent div:hover { border:1px solid #0F0;cursor:pointer }
.cont{
   position:absolute;
}

HTML

<div id="parent">
    <div class="mainContent">
        <div class="cont"> Content 1....</div>
        <div class="cont"> Content 2....</div>
        <div class="cont">Content 3...<br /><iframe width="267" height="200" src="http://www.youtube.com/embed/6tlQn7iePV4?rel=0" frameborder="0" allowfullscreen></iframe></div>
        <div class="cont"> Content 4....</div>  
    </div>
    <div class="extraContent">
        <div><p>1 Custom content here <br /> <a href="">Some link</a></p></div>
        <div><p>2 Custom content here <br /> <a href="">Some link</a></p></div>
        <div><p>3 Custom content here <br /> <a href="">Some link</a></p></div>
        <div><p>4 Custom content here <br /> <a href="">Some link</a></p></div>
    </div>
</div>​

我的问题是，如果我使用 iframe 直接从网站嵌入 YouTube 视频，它在 Chrome 中的转换效果很好，但 Firefox 和 IE 只是立即显示视频，并且每个幻灯片/div 都出现在视频下方，这是一个已知问题，没有人知道我可以让 IE 和 FF 表现的方法。

ps 因为这将在内容管理系统中，用户嵌入视频的唯一方法是使用来自 youtube 的默认代码。

在这里提琴

4

1 回答 1

1

这是一个已知问题，我称之为“超级 z-index”。这是一个flash相关的问题。如果您使用 HTML5 播放器，它不会发生。基本上你必须在你的 Youtube url 中再设置一个参数：

http://www.youtube.com/embed/6tlQn7iePV4?rel=0&amp;wmode=transparent
                                              ^--------------------^

顺便说一句，如果你想保持你的标记干净，你可以使用这个片段，它将你的 Youtube 链接转换为 iframe，包括 z-index 修复。

function embedYoutube(link, ops) {

  var o = $.extend({
    width: 480,
    height: 320,
    params: ''
  }, ops);

  var id = /\?v\=(\w+)/.exec(link)[1];

  return '<iframe style="display: block;"'+
    ' class="youtube-video" type="text/html"'+
    ' width="' + o.width + '" height="' + o.height +
    ' "src="http://www.youtube.com/embed/' + id + '?' + o.params +
    '&amp;wmode=transparent" frameborder="0" />';
}

有关它的更多信息这篇文章。

于 2012-10-25T22:55:45.620 回答