Question

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

相关网页是：http://core.slnmedia.com/inspiration/

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

正在改变磁贴位置的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”）;是什么导致了麻烦。如果您不包含此行，则视频会正确显示。由于某种原因，定位会导致视频无法正确显示。

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

由于

Answer 1

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

Answer 2

这对我有用：

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

Source

在谷歌浏览器中嵌入YouTube视频的奇怪错误

2 个答案: