Mobile SafariでYouTubeを再生させる

  • 投稿者:
  • カテゴリ:
このエントリーをはてなブックマークに追加

Web SiteにYouTubeの動画を埋め込む場合、YouTubeで<object>タグの埋め込み用ソースを取得できますが、これをiPhoneのMobile Safariで見ると、Mobile SafariからAppのYouTubeに切り替わって動画が再生されます。そして、再生は横位置なのでiPhoneを横位置に持ち替えないとなりません。ちょっと見たいだけの時は、煩わしさを感じてしまいます。

特に手間がかかるというわけではないですが、動画を再生させるたびに画面が切り替わって持ち帰るのは煩わしいです。(とはいえ、iPhoneではそれほど動画なんて見ませんが...。)

そこで、<object>で動画を配置せず<iframe>タグで動画を配置すると、動画がHTML5モードで配信されるので、画面は切り替わりますが、iPhoneのMobile Safariで直接再生できる様になり、縦位置でiPhoneをもっていた場合でも、横位置に持ち替える必要がありません。

こんな感じで配置します。
<iframe class="youtube-player" type="text/html" width="幅" height="高さ" src="http://www.youtube.com/embed/VIDEOのID" frameborder="0"></iframe>
下の様になります。

上の動画は下記のソースで埋め込まれてます。
<iframe class="youtube-player" type="text/html" width="425" height="344" src="http://www.youtube.com/embed/LD3EHBuBswI" frameborder="0"></iframe>

[2020,12,07:追記]
YouTube動画の埋め込み方法が変わって動画が表示されていなかったので、とりあえず以前表示されていた動画を下記に張っておきます。

[2020,12,07:追記ここまで]

このエントリーをはてなブックマークに追加