YouTube動画を htmlに埋め込む

通常、youtube画像を
1）右クリック
2）「埋め込みコードをコピー」
3）htmlに貼り付け
で、完了

▼基本コードの解説
**************************************************************************************************************
【サンプルコード】
＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM" width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞
**************************************************************************************************************

【再生する動画のURL】

・src="//www.youtube.com/embed/7DGAoeMXBWM"

この値に「http:」と付け加えると、YouTubeの動画そのものが表示されます。

http://www.youtube.com/embed/7DGAoeMXBWM

この動画を表示しますよという意味ですね。

【大きさの設定】

・width="640"・・・横幅を設定できます

・height="360"・・・縦幅を設定できます

数値は自由に指定が可能ですが、縦横の比率を間違えると動画が歪んで表示されてしまいます。また、小さ過ぎると再生ができない場合もあるようです。

【埋め込み時のプレイヤーに枠線をつけるかどうか】

・frameborder="0"・・・（周囲に枠線をつけない）

・frameborder="1"・・・（周囲に枠線をつける）

「1」にするとプレイヤーの外周に1pxの枠線が表示されます。

【全画面表示について】

・allowfullscreen・・・無し（全画面表示ができないようにする）

・allowfullscreen・・・有り（全画面表示ができるようにする）

全画面表示の制御が可能になります。allowfullscreenをつけない場合、全画面表示ができなくなります。

▼【再生する動画のURL】の後ろに、パラメーターを付加することによって、様々な再生方法を実現。

・再生後に表示される関連動画を表示させたくない

【追加コード】

rel=0

【追加後の埋め込みコード】
＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM?rel=0" width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞

・繰り返し再生させたい

【追加コード】

loop=1

【追加後の埋め込みコード】
＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM?loop=1"  width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞

・自動的に動画を再生させたい

【追加コード】

autoplay=1

【追加後の埋め込みコード】
＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM?autoplay=1"  width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞

・指定の位置から動画を再生させたい
【追加コード】
start=再生開始位置（秒数）

【追加後の埋め込みコード】
＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM?start=40"  width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞

・指定の位置で動画を停止させたい
【追加コード】
end=再生停止位置（秒数）
【追加後の埋め込みコード】
＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM?end=50"  width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞

・指定の区間だけを再生させたい

【追加コード】
【追加後の埋め込みコード】

・動画の画質を指定して再生させたい

【追加コード】
【追加後の埋め込みコード】

・字幕を表示させたい
【追加コード】
【追加後の埋め込みコード】

・アノテーションを非表示にしたい

【追加コード】
【追加後の埋め込みコード】

・キーボードからの操作を無効にしたい

【追加コード】
【追加後の埋め込みコード】

ただし、ブラウザによって不具合が出るので、注意


また、既定の埋め込みコードに少し手を加えるだけで、便利で見た目にも素敵な埋め込み方ができる。