HTML5でYoutubeの動画を再生できるようにする。
基本的な動画の埋め込み
Youtubeで目的の動画を開く。
赤枠の『共有』をクリック。
①『埋め込みコード』をクリックすると下部にコードが表示されるのでコピーする。
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>
※動画IDは実際の動画を埋め込む際に動画に対応したIDとなる。
コードの詳細
オプション設定をつけることによりいろいろなことができる
基本的な設定
| 内容 | 備考 |
|---|---|
| width | 画面のよこ幅指定 |
| hight | 画面のたて幅指定 |
| scr="***" | ***は、動画のURL |
| frameborder="0" | 0：周囲に枠線をつけない 1:周囲に枠線をつける |
| allowfullscreen | 記述あり：全画面可能 記述なし:全画面不可 |
動画を自動的に再生させる
動画のURLの後ろにautoplay=1を設定する
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID?autoplay=1" frameborder="0" allowfullscreen></iframe>
動画の開始と終了位置の指定
開始位置はstart=***（***は、開始位置の秒数）、終了位置はend=***（***は、終了位置の秒数）で指定をする。
| 内容 | 備考 |
|---|---|
| start=*** | 開始位置位置の指定 |
| end=*** | 終了位置の指定 |
| start=***&end=*** | 開始と終了位置の指定 |
開始位置の指定
開始位置を60秒後からスタートする場合は、start=60と指定する。
終了位置の指定
終了位置を120秒後にする場合は、end=120と指定する。
開始と終了位置の指定
開始を60秒後、終了を120秒後にする場合は、start=60&end=120と指定する
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID?start=&end=120" frameborder="0" allowfullscreen></iframe>
コントロールバーとシークバーの表示設定
プログレスバーとコントロールバーの表示設定ができる。
| 内容 | 備考 |
|---|---|
| autohide=0 | コントロールバーとシークバーを表示 |
| autohide=1 | コントロールバーとシークレスバーを非表示 |
| autohide=2 | シークバーを非表示(デフォルト) |
シークバー色の変更
| 内容 | 備考 |
|---|---|
| color=red | 赤色(デフォルト) |
| color=white | 白色 |
コントロールバーを表示
| 内容 | 備考 |
|---|---|
| controls=0 | コントロールバー非表示 |
| controls=1 | コントロールバー表示(デフォルト) |
| controls=2 | 動画再生後にコントロールバー表示 |
繰り返し再生
| 内容 | 備考 |
|---|---|
| loop=0 | 繰り返し再生しない(デフォルト) |
| loop=1 | 繰り返し再生される |
YouTubeのロゴ表示
| 内容 | 備考 |
|---|---|
| modestbranding=1 | コントロールバーのロゴを非表示 |
動画再生前のタイトル表示
| 内容 | 備考 |
|---|---|
| showinfo=0 | 表示しない |
| showinfo=1 | 表示する(デフォルト) |
テーマ色の指定
| 内容 | 備考 |
|---|---|
| theme=dark | 黒色(デフォルト) |
| theme=light | 白色 |
ついでにレスポンシブ対応
直接埋め込んだ場合（これだとブラウザの横幅を変更しても固定のまま）
レスポンシブ対応のために下記のCSSを追加
.move-box{position:relative;width:100%;padding-top:56.25%;}
.move-box iframe{position:absolute;top:0;right:0;width:100%;height:100%;}
実際にレスポンシブ対応CSSを記述した埋め込み
それに対応してdivを追加
<div class="move-box"><iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe></div>
※bloggerだと幅固定みたいなのでブラウザの横幅を変更しても変わらなかった。
0 件のコメント :
コメントを投稿