YouTubeのURL
YouTubeの「共有」よりURLをコピーすると、次のような短縮URLとなります。
https://youtu.be/wa-wq8ygHt0
https://youtu.be/
からはじまるURLは短縮URLです。
<iframe width="560" height="315"
src="https://www.youtube.com/embed/wa-wq8ygHt0"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
https://www.youtube.com/
からはじまるURLがYouTubeの動画のURLです。
width属性 | width=”560″ | 横560px |
height属性 | height=”315″ | 高さ315px |
frameborder | frameborder=”0″ | フレームの境界線非表示 |
allowfullscreen | allowfullscreen | 全画面のボタンを表示する |
全画面のボタンを表示しない場合はallowfullscreenを削除します。
YouTubeの短縮URL(共有→URLコピー)
https://youtu.be/wa-wq8ygHt0
YouTubeの動画URL(共有→動画の埋め込み)
https://www.youtube.com/embed/wa-wq8ygHt0
YouTubeの動画URL
https://www.youtube.com/watch?v=wa-wq8ygHt0
VIDEO_ID は、wa-wq8ygHt0 です。watch?v 以下、またはembed/以下。
共有→埋め込みをコピーしてカスタムhtmlに貼り付けます。https://www.youtube.com/embed/~(VIDEO_ID)の後に&mute=1を記述。
mute | mute=1 | 消音再生する |
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/wa-wq8ygHt0?&mute=1” frameborder=”0″ allowfullscreen=””></iframe> |
HTML コード(カスタムhtmlに貼る)
<iframe width="560" height="315" src="https://www.youtube.com/embed/wa-wq8ygHt0?&mute=1" frameborder="0" allowfullscreen=""></iframe>
複数のパラメーターを指定する場合 &
の後にパラメーターを入れ指定します。
<iframe width="560" height="315" src="https://www.youtube.com/embed/wa-wq8ygHt0?autoplay=1&mute=1&controls=1&loop=1&playlist=wa-wq8ygHt0" frameborder="0" allowfullscreen=""></iframe>
autoplay=1 | 自動再生 | 1または0 |
mute=1 | ミュート | 1または0 |
controls=1 | 音量ボタンなどの表示 | 1または0 |
loop=1&playlist=「VIDEO_ID 」 | ループ再生 | 1または0 |
「VIDEO_ID 」 | wa-wq8ygHt0 | embed/以降 |
YouTubeに限らず、ABEMAやTwitterの動画など、開始時間を指定する簡単な方法です。カスタムhtmlではなく、URLの埋め込みで指定できます。
開始時間は秒で指定します。1分30秒ならば90秒です。
t=秒数 | 開始時間を指定 |
「埋め込み」をコピーする必要はありません。URLをコピーするだけです。
YouTubeのURLは次の通りです。
https://youtu.be/wa-wq8ygHt0?t=15 |
コピーしたURLを貼り編集(鉛筆のアイコン)をクリック
?t=15を追加する
開始時間と終了時間は秒で指定します。1分30秒ならば90秒です。
start= | 開始時間を指定 |
end= | 終了時間を指定 |
複数のパラメーターを指定する場合&
の後にパラメーターを入れ指定します。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/wa-wq8ygHt0? &start=15“ frameborder=”0″allowfullscreen></iframe> |
HTML コード(15秒から開始の場合)(カスタムhtmlに貼る)
<iframe width="560" height="315"
src="https://www.youtube.com/embed/wa-wq8ygHt0?&start=15"frameborder="0"
allowfullscreen></iframe>
15秒から開始(上記のHTMLコードで再生)
autoplay | autoplay=1 | 自動再生する |
複数のパラメーターを指定する場合 &
の後にパラメーターを入れ指定します。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/wa-wq8ygHt0?&autoplay=1“ frameborder=”0″allowfullscreen></iframe> |
HTML コード(カスタムhtmlに貼る)
<iframe width="560" height="315"
src="https://www.youtube.com/embed/wa-wq8ygHt0?&autoplay=1"frameborder="0"
allowfullscreen></iframe>
自動再生による埋め込み動画の再生は、視聴回数としてカウントされません。
関連動画は無効にはできません。
rel | rel=0 | 再生した動画と同じチャンネルから関連動画が選択される |
複数のパラメーターを指定する場合&
の後にパラメーターを入れ指定します。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/wa-wq8ygHt0?&rel=0“ frameborder=”0″allowfullscreen></iframe> |
HTML コード(カスタムhtmlに貼る)
<iframe width="560" height="315"
src="https://www.youtube.com/embed/wa-wq8ygHt0?&rel=0"frameborder="0"
allowfullscreen></iframe>
videoseries?list | videoseries?list=再生リスト ID | 再生リストを表示させる |
「videoseries?list=再生リスト ID 」を削除すると再生リストが表示されません。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/ videoseries?list=再生リストID” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe> |
参考 YouTube リファレンス
IFrame URL にパラメータを追加すると、アプリケーション内での再生方法をカスタマイズできます。たとえば
https://developers.google.com/youtube/player_parameters?hl=jaautoplay
パラメータによる動画の自動再生や、loop
パラメータによる動画の繰り返し再生が可能です。
<iframe>
タグを使用するsrc
にURL に指定する&
で記述例 15秒からミュートで再生する
&mute=1&start=15
width | width=”640″ | 横のサイズを指定 |
height | height=”360″ | 高さのサイズを指定 |
frameborder | frameborder=”0″ | フレームボーダーなし |
allowfullscreen | allowfullscreen | 画面 |
mute | mute=1 | 消音(ミュート) |
autoplay | autoplay=1 | 自動再生 |
loop | loop=1 | ループ(繰返し)再生 |
rel | rel=0 | 関連動画の設定 |
playlist | playlist=再生リストID | 再生リストを表示 |
modestbranding | modestbranding=1 | YouTubeのロゴを非表示 |
複数のパラメーターを指定する場合&
の後にパラメーターを入れ指定します。
例 (引用 YouTube リファレンス)
<iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
frameborder="0"></iframe>
参考
WordPressブロックエディタ(Gutenberg)で動画を埋め込む方法はいくつかあります。
embed
ショートコードを使用設定を開くと高度な設定ができます。
高度な設定をクリックすると「wp-embed-aspect-4-3」と記載があります。4-3はアスペクト比なので、これを変更するとアスペクト比が変わります。
[embed]https://youtu.be/wa-wq8ygHt0[/embed]
[embed width="300" height="200"]https://www.youtube.com/embed/wa-wq8ygHt0[/embed]
従来のように「クラシック」ブロックでYouTubeを埋め込むことができます。
動画を埋め込んだ場合、次の指定ができます。
自動再生、ループ、消音(ミュート)を指定。
動画のパラメーター
controls | controls=0 | 動画下部のコントロールバーを非表示にする |
autoplay | autoplay=1 | 自動再生する |
loop | loop=1 | ループ再生する |
muted | muted=1 | ミュート |
参考 https://support.google.com/youtube/answer/171780?hl=ja
IFrame Player API を使用し、Youtubeの音量調整ができます。
参考 https://developers.google.com/youtube/iframe_api_reference?hl=ja