javascript - 我的图像在 Chrome 和 Firefox 中显示，但在 Safari 或 iPhone 中不显示

Question

我创建了一个视频缩略图，单击它会触发隐藏在它后面的视频自动播放。视频/图像缩略图也是响应式的，并会根据浏览器大小的变化进行调整。

该功能在桌面版 Chrome 和 Firefox 上运行良好，但在 Safari 上运行不佳。此外，它不适用于我的 iPhone 4s 的 Chrome 和 Safari 应用程序。

这与 Safari 不处理大图像无关，因为我的图像只有 416 × 234。

编辑:我应该补充一点，自动播放功能保持不变。每当我点击 img 应该在屏幕上的位置时，自动播放就会开始。这甚至适用于移动设备(尽管没有自动播放，因为不支持移动设备)。这也不是扩展/命名问题，因为当我检查源代码时，Safari 浏览器正在加载图像。

相关的 HTML:

<div id="video-thumbnail">
    <img src="norman.png" class="video-image" alt=""/> 
    <iframe class="video-embed" frameborder="0" allowfullscreen=""  src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&color=white&controls=1&showinfo=0" s8011508427261248624="true" replaced="true" ></iframe>
</div>

CSS:

#video-thumbnail {
     position: relative;
     padding-bottom: 56.25%;
     padding-top: 55px;
     height: 0;
     overflow: hidden;
}

.video-image {
     position: relative;
     content: "";
     cursor: pointer;
     z-index: 5;
}

.video-embed {
     display: none;
     opacity: 0;
     z-index: 10;
}

.video-image, .video-embed {
     position: absolute;
     top:0;
     left: 0;
     width: 100%;
     height: 100%;
     padding: 60px 60px 80px 60px;
}

JS:

 (function($){
      $(document).ready( function(){
           $(".video-image").click(function(){
           $(".video-embed").css({"opacity":"1","display":"block"});
           $(".video-embed")[0].src += "&autoplay=1";
           $(this).unbind("click");
          });
      } );
  })(jQuery)

Answer 1

我已经回答了我自己的问题。删除行

content: "";

.video-image 的 CSS 做到了这一点。这是错误地从前面的示例中复制过来的。有趣的是，JS 在 Chrome 和 Firefox 中处理此标记的存在的方式与在 Safari 中不同。在 JS 方面经验不足，无法完全理解原因，如果有人有解释，我很乐意。