Youtubeの動画をiPhone向けのWebサイトで使用する

例えば自分がアップしている有る動画のURLは以下の様に成っています。

http://www.youtube.com/watch?v=9nKVC8KRMD4

9nKVC8KRMD4 の部分が「動画ID」になっており、ここをそれぞれの動画でユニークな値が振られています。

まずはそのままリンクaタグのhrefの値にそのまま指定して使う方法。

<a href="http://www.youtube.com/watch?v=動画ID">Youtubeの動画を再生</a>

ほぼ同じでURLが多少短いバージョン。

<a href="http://www.youtube.com/v/動画ID">Youtubeの動画を再生</a>

もう1つの方法。

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/9nKVC8KRMD4" frameborder="0" allowfullscreen></iframe>

上の2つのaタグを使用したものではリンクをクリックするとYoutubeのアプリが起動し、動画の再生が終った後はYoutubeのアプリに留まります。しかし、こちらの方法で有ればSafariアプリ内で動画が再生され、再生終了後はSafariに戻って来ます。また、動画のサムネイルが自動的に表示されます。

こちらの形式は動画毎に width や height の値が異なる事が有ります。埋め込みたい動画の「埋込みコード」のボタンを押して表示されるコードを貼り付ける様にしましょう。

強火で進め

このブログではプログラム関連の記事を中心に書いてます。

Youtubeの動画をiPhone向けのWebサイトで使用する

関連情報