YouTube動画をブログへ埋め込むときのコード設定
今までFC2ブログの「YouTube動画ツール」を使って動画を埋め込んでいたのだが、再生後に関連動画を表示させないようにできると今更知った。それ以外にも動画サイズの調整や再生区間の指定など他にも必要そうな設定を合わせてメモ。
◆埋め込みコードの設定
動画タイトル下の 共有 → 埋め込みコード → もっと見る
▼動画が終わったら関連動画を表示する
▼プレーヤーのコントロールを表示する
▼動画のタイトルとプレーヤーの操作を表示する
▼動画のサイズ
無難とか言ったけどブログの本文幅が640未満だとはみ出るので注意。カスタムで自分の好きなように変更できるが縦横の比率を間違えると動画が歪んで表示されたり、サイズが小さ過ぎると再生ができない場合もあるとか。
▼動画の横幅＆縦幅をカスタマイズ
ブログの横幅ぴったりに動画を表示したいが比率の計算が面倒な場合、比率計算君を使うと楽。
動画の比率は16:9、横幅はこのブログの本文幅670を入力。横幅670を入力すると自動的に縦幅376.875が表示されるが余裕を持たせて377で良いかと。
◆埋め込みコードの内容 上記の設定の場合。
▼埋め込みコード
▼横幅と縦幅 数値を変えることで自由に変更可能。
▼動画URL ここだけ変えれば他の動画でも使い回しができる。
▼関連動画の非表示 この記述が無い場合、動画終了後に関連動画が表示される。
▼埋め込み時のプレイヤーの枠線 1だとプレイヤーの外周に1pxの枠線が表示される。
▼全画面表示 この記述が無い場合、動画プレイヤー右下に全画面アイコンが表示されない。
◆複数のコードを同時に設定
以下のコードを同時に使いたい場合、&でそれぞれを繋ぐ。順番は適当でOK。
動画URLの直後に ?コード1&コード2&コード3 といった感じ。?は最初のコードの直前に必須。
<iframe width="670" height="377" src="https://www.youtube.com/watch?v=v5cRoQgQzdw?rel=0&start=35&end=83" frameborder="0" allowfullscreen></iframe>
↓の動画は「関連動画を非表示、35秒から動画再生、83秒で動画停止」、ついでに縦横幅をこのブログの"旧"本文幅ギリギリで表示してみた。
▼関連動画の非表示 「◆埋め込みコードの内容」でも解説したがこちらにも記載。
▼ループ再生 現在はできない？
▼動画を自動再生 いきなり音が出ると迷惑なことも多いのでやらない方が無難。
▼動画を指定位置から再生＆指定位置で停止 1秒未満で微調整できないのが残念。
▼指定区間で動画を再生 上記の組み合わせ。
▼動画の画質を指定 現在はできない？
▼字幕 ONにすると視聴者が字幕OFFにしていても字幕が表示される。
▼アノテーション ゴテゴテ見づらい動画の場合は消すのが無難。
▼キーボードからの操作 無効にする意味がよく分からないが一応記載。
動画タイトル下の 共有 → 埋め込みコード → もっと見る
▼動画が終わったら関連動画を表示する
- これは人によってはあまり見たくない動画が表示されることもあるので外しておくのが無難。
▼プレーヤーのコントロールを表示する
▼動画のタイトルとプレーヤーの操作を表示する
- この2つは非表示にするメリットがほぼ無いと思うのでチェックを付けたままにした。
▼動画のサイズ
| サイズ | 通称 | アスペクト比 | その他 |
| 560×315 | 16:9 | デフォルト | |
| 640×360 | HVGAW | 16:9 | このくらいが無難 |
| 853×480 | FWVGA | 約16:9 | |
| 1280×720 | HD(720) | 16:9 | |
| カスタム | ブログの本文幅に合わせて変更 |
▼動画の横幅＆縦幅をカスタマイズ
ブログの横幅ぴったりに動画を表示したいが比率の計算が面倒な場合、比率計算君を使うと楽。
動画の比率は16:9、横幅はこのブログの本文幅670を入力。横幅670を入力すると自動的に縦幅376.875が表示されるが余裕を持たせて377で良いかと。
◆埋め込みコードの内容 上記の設定の場合。
▼埋め込みコード
- <iframe width="640" height="360" src="https://www.youtube.com/watch?v=v5cRoQgQzdw?rel=0" frameborder="0" allowfullscreen></iframe>
▼横幅と縦幅 数値を変えることで自由に変更可能。
- width="640" height="360"
▼動画URL ここだけ変えれば他の動画でも使い回しができる。
- https://www.youtube.com/watch?v=v5cRoQgQzdw
▼関連動画の非表示 この記述が無い場合、動画終了後に関連動画が表示される。
- ?rel=0
▼埋め込み時のプレイヤーの枠線 1だとプレイヤーの外周に1pxの枠線が表示される。
- frameborder="0" 周囲に枠線を付けない
- frameborder="1" 周囲に枠線を付ける
▼全画面表示 この記述が無い場合、動画プレイヤー右下に全画面アイコンが表示されない。
- allowfullscreen
◆複数のコードを同時に設定
以下のコードを同時に使いたい場合、&でそれぞれを繋ぐ。順番は適当でOK。
動画URLの直後に ?コード1&コード2&コード3 といった感じ。?は最初のコードの直前に必須。
<iframe width="670" height="377" src="https://www.youtube.com/watch?v=v5cRoQgQzdw?rel=0&start=35&end=83" frameborder="0" allowfullscreen></iframe>
↓の動画は「関連動画を非表示、35秒から動画再生、83秒で動画停止」、ついでに縦横幅をこのブログの"旧"本文幅ギリギリで表示してみた。
▼関連動画の非表示 「◆埋め込みコードの内容」でも解説したがこちらにも記載。
- rel=0
▼ループ再生 現在はできない？
- loop=1
▼動画を自動再生 いきなり音が出ると迷惑なことも多いのでやらない方が無難。
- autoplay=1
▼動画を指定位置から再生＆指定位置で停止 1秒未満で微調整できないのが残念。
- start=10 10秒から再生
- end=20 20秒で停止
▼指定区間で動画を再生 上記の組み合わせ。
- start=10&end=20 10～20秒まで再生
▼動画の画質を指定 現在はできない？
- vq=値
| 値 | 画質 |
| highres | 動画の最高画質 |
| hd1440 | 1440p |
| hd1080 | 1080p |
| hd720 | 720p |
| large | 480p |
| medium | 360p |
| small | 240p |
▼字幕 ONにすると視聴者が字幕OFFにしていても字幕が表示される。
- cc_load_policy=0 字幕OFF
- cc_load_policy=1 字幕ON
▼アノテーション ゴテゴテ見づらい動画の場合は消すのが無難。
- iv_load_policy=1 アノテーションOFF
- iv_load_policy=3 アノテーションON
▼キーボードからの操作 無効にする意味がよく分からないが一応記載。
- disablekb=0 キーボードからの操作を有効
- disablekb=1 キーボードからの操作を無効
- 関連記事
-
-
FC2カウンターの設置
2015/11/08
-
検索結果にスマホ・携帯のページが出てこないようにする
2015/11/03
-
YouTube動画をブログへ埋め込むときのコード設定
2015/07/10
-
Fetch as Googleで変更した記事タイトルを検索結果に反映
2015/06/09
-
ウェブマスターツールの設定と使い方
2015/05/09
-