0

在谷歌浏览器中查看网页时出现了一个奇怪的问题。在 ie9 / safari 中查看时，嵌入的 youtube 视频工作正常，但由于某种原因，在 chrome 中它只是在页面加载时显示一个黑框。奇怪的是页面与之交互的那一刻，即。用户向下滚动，视频将正确显示。我不确定出了什么问题。

有问题的页面是：http ://core.slnmedia.com/inspiration/

页面上有一个脚本可以检测大图块右侧的可用宽度，如果有足够的空间，弹出面板将显示在右侧。如果没有，面板将显示在左侧。如果您调整浏览器窗口的大小，使“bevis 标记”图块位于屏幕的右上角，并且右侧只有少量可用空间，然后单击它，您会看到我的效果谈论。

改变磁贴位置的 javascript 函数如下：

$('.large-tile').hover(function() {
    $(this).find('.bw-photo').hide();
    $(this).find('.inspiration-detail-wrapper').show();    
    $(this).css("z-index", "2");   

    var profile = $(this).find('.inspiration-detail');
    if(profile.find('.content').text().trim().length == 0) {
      showData($(this).attr('id').substring(1, $(this).attr("id").length));  
    }          

    // **Depending on how much window space is available, position the panel on**left/right        
    var available = $(window).innerWidth() - ($(this).offset().left + 300);
    if(available >= 412) {
      // If enough space then show panel on right
      profile.css("left", "320px");          
    }
    else {
      // Otherwise attach left
      profile.css("left", "-368px");          
    }
    profile.show();

    $('.scrollbar-wrapper').tinyscrollbar({ size: 252 }); 
  },
  function() {
    $(this).find('.bw-photo').show();
    $(this).find('.profile').hide();        
    $(this).css("z-index", "1"); 
    $(this).find('.inspiration-detail-wrapper').hide();     
  });

奇怪的是行 profile.css("left", "320px"); 是什么导致了麻烦。如果您不包含此行，则视频将正确显示。由于某种原因，定位导致视频无法正确显示。

我希望我已经正确解释了这个问题 - 有没有人知道我在哪里出错了？快把我逼疯了！

谢谢

4

2 回答 2

1

微软更新后我遇到了麻烦。我上周清除了缓存和 cookie，现在一切正常。

于 2012-11-21T05:26:35.403 回答
0

这对我有用：

<iframe allowfullscreen frameborder="0" height="315"
src="http://www.youtube.com/embed/A3pIrBZQJvE?wmode=transparent" width="420"
wmode="Opaque"></iframe>

资源

于 2013-05-13T03:09:20.797 回答