嵌入仅在 Safari 上显示的 YouTube 链接。为什么不在 Chrome 上显示？答案

【问题标题】：Embed YouTube link only showing on Safari. Why not showing on Chrome?嵌入仅在 Safari 上显示的 YouTube 链接。为什么不在 Chrome 上显示？
【发布时间】：2015-07-18 17:05:51
【问题描述】：

我在网页上嵌入的 YouTube 链接在 Safari 上完美显示，但在 Chrome 上却没有！我不明白为什么。

代码如下：

<iframe width="720" height="405" src="https://www.youtube.com/embed/lhYcUN60QjU?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

请指教！

【问题讨论】：

打开 the direct link itself 可以吗？（在 Chrome 中为我工作）。如果是，那么您的 HTML 代码有问题。我只能发现allowfullscreen 是个问题，那不应该是allowfullscreen="true" 之类的东西吗？甚至可能没有引号。

标签： google-chrome iframe video youtube embed

【解决方案1】：

检查已安装的扩展程序和 Chrome 版本。你有 Chrome 的开发者版本吗？

点击并选择设置 > 显示高级设置 > 删除浏览数据，尝试从 Chrome 清除缓存。

另外，请选中在可用时启用硬件加速。

【讨论】：

【解决方案2】：

从 https:// 切换到 http://。我在 this Pen 的 Chrome (43.0.2357.134 (64-bit)) 中播放它。

（我将代码放在这里只是因为编辑器不会让我在没有代码的情况下引用 Pen。代码用于响应式<iframe>。一般见How to make this youtube video responsive?。 )

// CSS

.responsive-wrapper {
  position: relative;
  height: 0;    /* gets height from padding-bottom */
  /* put following styles (necessary for overflow and scrolling handling  
     on mobile devices) inline in .responsive-wrapper around iframe because not  
     stable in CSS:
     -webkit-overflow-scrolling: touch; overflow: auto; */
}

.responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#Iframe-YouTube-Life-Coach {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

/* padding-bottom = h/w as % -- set aspect ratio */
.responsive-wrapper-wxh-560x315  {
  padding-bottom: 56.25%;
}  

.center-block-horiz {
  margin-left: auto;
  margin-right: auto;
}
.border-5px-inset-4f4f4f {
  border: 5px inset #4f4f4f;
}
.set-padding {
  padding: 30px;
}

// HTML

<!-- embed responsive iframe --> 
<div class="set-padding border-5px-inset-4f4f4f">
<div id="Iframe-YouTube-Life-Coach" 
class="border-5px-inset-4f4f4f center-block-horiz">
  <div class="responsive-wrapper 
              responsive-wrapper-wxh-560x315"
       style="-webkit-overflow-scrolling: touch; overflow: auto;">

    <iframe src="http://www.youtube.com/embed/lhYcUN60QjU?rel=0&amp;showinfo=0">  
      <p style="font-size: 110%;"><em><strong>IFRAME: </strong>  
There is iframe content being displayed  
here but your browser version does not support iframes. </em>  
Please update your browser to its most recent version  
and try again.</p>  
    </iframe>
  </div>
</div>
</div>

【讨论】：