モバイル Web サイトを作成していて、小さな (88 ピクセル x 50 ピクセル) YouTube サムネイルを表示したいと考えています。このサムネールをクリックすると、ビデオがフルスクリーンで再生され、Web ページに戻ります。iOS と Android で動作するはずです。
私の最初のアプローチは、を使用することでした<a href="http://youtube.com/watch?v=oHg5SJYRHA0>...</a>。ただし、iOS では、ユーザーは YouTube アプリにリダイレクトされるため、手動で Safari に戻る必要があります。
次に、小さなiframeプレーヤーを埋め込んでみました
<iframe id="ytplayer" type="text/html" src="http://www.youtube.com/embed/T0WepLbWyq0?autoplay=1&controls=0&modestbranding=1&showinfo=0&rel=0" frameborder="0" allowfullscreen width=88 height=50></iframe>
これにより、iOS の「完了」ボタンを使用して全画面表示のビデオが正しくポップアップ表示され、ユーザーは Safari ページに戻ります。ただし、結果のサムネイルは、大きな赤い [再生] ボタンで占められています。
![大きな赤い [再生] ボタン](http://i.imgur.com/Gyecm.png){kind=link}
埋め込みビデオの赤い再生ボタンを非表示にする方法はありますか?
または、視聴が終了したときにユーザーがページに戻ることができるように、小さな YouTube サムネイルを Web ページに埋め込む別の方法はありますか?
現在、私は次のことを検討しています: a) 醜い赤い再生ボタンを、クリックを通過させるオーバーレイで隠そうとするか、b) YouTube ビデオ ファイルへの直接リンクを取得しようとしています。ビデオ ファイルに直接リンクすると、ユーザーは終了時にブラウザに戻ります。ただし、これらのハックは複雑で脆弱に見えます。より良い方法はありますか？
ありがとう！