フリーソフトやChrome拡張機能の使い方、ゲーム攻略、漫画感想など雑多な内容。

YouTube動画をブログへ埋め込むときのコード設定

0 Comments
RYO
今までFC2ブログの「YouTube動画ツール」を使って動画を埋め込んでいたのだが、再生後に関連動画を表示させないようにできると今更知った。それ以外にも動画サイズの調整や再生区間の指定など他にも必要そうな設定を合わせてメモ。

◆埋め込みコードの設定

動画タイトル下の 共有埋め込みコードもっと見る
YouTube埋め込みコード


YouTube埋め込みコード 設定
▼動画が終わったら関連動画を表示する
  • これは人によってはあまり見たくない動画が表示されることもあるので外しておくのが無難。

▼プレーヤーのコントロールを表示する
▼動画のタイトルとプレーヤーの操作を表示する
  • この2つは非表示にするメリットがほぼ無いと思うのでチェックを付けたままにした。

▼動画のサイズ
サイズ通称アスペクト比その他
560×31516:9デフォルト
640×360HVGAW16:9このくらいが無難
853×480FWVGA約16:9
1280×720HD(720)16:9
カスタムブログの本文幅に合わせて変更
無難とか言ったけどブログの本文幅が640未満だとはみ出るので注意。カスタムで自分の好きなように変更できるが縦横の比率を間違えると動画が歪んで表示されたり、サイズが小さ過ぎると再生ができない場合もあるとか。

▼動画の横幅&縦幅をカスタマイズ
YouTube埋め込みコード 動画の幅
ブログの横幅ぴったりに動画を表示したいが比率の計算が面倒な場合、比率計算君を使うと楽。

動画の比率は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動画の最高画質
    hd14401440p
    hd10801080p
    hd720720p
    large480p
    medium360p
    small240p

▼字幕 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 キーボードからの操作を無効
関連記事
RYO
管理人RYO

Comments 0

There are no comments yet.