私の画像はChromeとFirefoxで表示されますが、サファリやiPhoneでは表示されません

Question

クリックしたときに表示されるビデオのサムネイル画像を作成しました。ビデオ/画像サムネイルも応答性が高く、ブラウザのサイズの変更に合わせて調整します。

デスクトップ上のChrome & Firefoxでは機能は正常ですが、Safariでは機能しません。さらに、ChromeとSafariの両方のアプリでiPhone 4で動作しません。

私の画像のみ416×234

EDITあるので、これは、Safariが大きな画像を処理していないとしなければならないん：私は、自動再生機能がそのまま残ることを追加する必要があります。 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

。 .video-image用のCSSからのラインの削除

content: ""; 

トリックしました。これは前の例から誤ってコピーされました。興味深いことに、JSはChromeの& Firefoxでこのタグの存在をSafariとは異なる方法で処理しました。なぜJS完全に理解するために十分な経験はありません、誰かが持っている場合、私は説明が大好きです。

Answer 2

あなた自身が既に質問に答えているので、これは実際に修正されたものではありませんが、あなたが関心を持っていたので、JSは各現代のブラウザで異なる規制の下でデフォルトで処理されます。したがって、この例では、

content : " "; 

はサファリはおそらく空の文字列が彼らのJSハンドラで使用することはできませんが、クロムとFirefoxがデフォルトの値を取ることができます。詳細については、これらのリンクを参照してください。

https://www.quora.com/Why-do-different-browsers-process-CSS3-HTML-5-and-JavaScript-differentlyおよびstack question