全宽 Vimeo 嵌入无响应答案

【问题标题】：Full-Width Vimeo Embed non-responsive全宽 Vimeo 嵌入无响应
【发布时间】：2017-04-05 12:11:48
【问题描述】：

我在 div 中嵌入了一个 vimeo，它是视口的全宽。该视频完美运行了几天，但现在播放按钮（和所有其他按钮）完全没有响应。

我尝试过使用z-index，但这不起作用。

<div class="full-screen-vid">
  <iframe src="https://player.vimeo.com/video/192013765" width="100%" height="700" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

.full-screen-vid {
   width: 100vw;
   position: relative;
   left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
   margin-top: 90px;
   z-index: -1;
}

我在控制台中收到一条奇怪的消息，我查找并尝试修复它，但我认为这不是问题（或整个问题），因为如果我从 @987654324 中删除视频@，它工作正常。

控制台消息：

Refused to load the script'data:application/javascript;base64,KGZ1bmN0aW9xxxxIGZ1…xxxxxxxxxxxx=' 
because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 
https://f.vimeocdn.com https://ssl.google-analytics.com https://js-agent.newrelic.com https://bam.nr-data.net https://f.vimeocdn.com".

【问题讨论】：

为什么要在 div 中加载 iframe？为什么不给 iframe 提供全屏视频的 CSS？
好建议，但我仍然有同样的问题
实际上 - 这样做并更改 z-index 确实有效，谢谢！如果你把它作为答案，我会把它标记为正确的。

标签： html css vimeo vimeo-player

【解决方案1】：

单独加载<iframe>，将full-screen-vid 类添加到其中，应该可以工作。

【讨论】：