JS YouTube別のiOSバージョンに一貫性のないスワップを埋め込む

Question

私はいくつかの動画があるモバイルサイトで作業しています。私は提供されたYouTube APIを使用して、さまざまなデバイスでFlashとHTML5を切り替えることができますが、いくつかの理由からカスタムサムネイルを使用しています。

ユーザが画像をクリックしてからビデオonClickの画像を交換し、switchItUpメソッドを呼び出すまで、YouTube iframeを非表示にするためにJavaScriptを使用します。 APIで指定され

 var video = document.getElementById("VideoID"); 
     var image = document.getElementById("PlaceholderImage"); 
     video.style.display = "none"; 

     function switchItUp() { 
      var video = document.getElementById("VideoID"); 
      var image = document.getElementById("PlaceholderImage"); 
      image.style.display = "none"; 
      video.style.display = "block"; 
     }

YouTubeのコード

は、以下の通りである（とのみときにページ上で動作します）：

<iframe src="http://www.youtube.com/embed/BaKcl0Qg13o?autoplay=1" width="300" height="190"></iframe> 

はここで楽しい部分です。

• これはSafari 4.0でうまくいきます。
• 4.1では、onClickはビデオを表示しますが、再生できません。
• 4.2ではビデオは全く表示されませんが、画像が隠れるとページに大きな空白が残ります。

これはすべてのデスクトップブラウザでうまく機能するため、これをデバッグすることは問題です。

ご協力いただきましてありがとうございます。 TYIA！

---

EDIT：それはディスプレイとして開始しなければならないので、プレイヤーは、1回のクリックで動作するようにスワップのための自動再生にはなりません：ページ上なし。

また、容器がこの問題を引き起こしますか？現在、表示されていないページの<span>の内部にレンダリングされています。

Answer 1

と「ショー」それは我々がサムネイルスワップを取り除くことにしました4.2では動作しませんすることができます。これを行う方法は、すべてのiOSバージョンで機能しません。 YouTubeで作成されたサムネイルを使用しています。

Answer 2

display=noneではなく、画面外にビデオを配置して非表示にしてください。これは、この種の問題のための古典的な回避策です。

video.style.position = 'absolute'; 
video.style.top = '-10000px'; 
video.style.left = '-10000px'; 

次に、あなたはそのため自動再生の

video.style.position = 'static'