谷歌浏览器中嵌入 youtube 视频的奇怪错误答案

【问题标题】：Weird bug with embedded youtube videos in google chrome谷歌浏览器中嵌入 youtube 视频的奇怪错误
【发布时间】：2012-11-03 06:11:28
【问题描述】：

我在 google chrome 中查看网页时遇到了一个奇怪的问题。在 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");是什么导致了麻烦。如果您不包含此行，则视频将正确显示。由于某种原因，定位导致视频无法正确显示。

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

谢谢

【问题讨论】：

标签： css google-chrome youtube

【解决方案1】：

这对我有用：

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

Source

【讨论】：

【解决方案2】：

我在 Microsoft 更新后遇到了问题。我上周清除了缓存和 cookie，现在一切正常。

【讨论】：