css - Tumblr 视频帖子未在 Chrome 和 Firefox 中显示，但在 Safari 中显示？

Question

目前正在整理一个 Tumblr 主题，视频帖子有问题，因为来自 Vimeo 的嵌入式视频在 Safari(8.0 和 iOS 8.1)以及 Google Chrome 的移动应用程序中显示完美。但是它只是没有显示在我桌面上的 Chrome (v39.0.2171.71) 或 Firefox (v33.1.1) 上，只是显示我应用的黑色背景？有人知道这里发生了什么吗？

我把它原样放在 Tumblr 上 (link)，我的视频发布代码如下:

{block:Video}
<section class="e-all d-all c-all b-all a-all">
   <div class="video-player">{Video-700}</div>
   {block:Caption}
     <div class="e3-e6 d3-d6 c4-c7 b4-b7 a4-a7 caption">{Caption}</div>{/block:Caption}
   </section>
{/block:Video}

非常感谢任何帮助，谢谢。

Answer 1

CSS 看起来像是 fluid width video technique 的实现但缺少一些属性。

CSS

.video-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  background-color: #000000;
}

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

结果

附带说明一下，我会看一下 http://fitvidsjs.com/作为更可靠的解决方案或如何制作自己的指南。视频嵌入并不总是 16:9 的比例。