我的图像在 Chrome 和 Firefox 中显示，但不是 safari 或 iPhone答案

【问题标题】：My image is displaying in Chrome & Firefox, but not safari or iPhone我的图像在 Chrome 和 Firefox 中显示，但不是 safari 或 iPhone
【发布时间】：2016-10-29 19:58:06
【问题描述】：

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

该功能在桌面版 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)

【问题讨论】：

标签： javascript html ios css safari

【解决方案1】：

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

content: "";

来自 .video-image 的 CSS 做到了这一点。这是从前面的示例错误地复制过来的。有趣的是，JS 在 Chrome 和 Firefox 中处理此标签的方式与在 Safari 中不同。没有足够的 JS 经验来完全理解为什么，如果有人有的话，我很想解释一下。

【讨论】：

【解决方案2】：

所以这并不是一个真正的解决方案，因为您自己已经回答了这个问题，但是由于您似乎感兴趣，因此每个现代浏览器默认情况下 JS 在不同的规则下处理。因此在这个例子中，

content : " ";

使 chrome 和 firefox 采用默认值，而 safari 可能不允许在其 JS 处理程序中使用 空字符串。如果您对它的详细工作原理更感兴趣，这些链接将为您提供帮助。

https://www.quora.com/Why-do-different-browsers-process-CSS3-HTML-5-and-JavaScript-differently 和这个stack question

【讨论】：