• HOME > 
  • WordPress > 
  • ワードプレスでYoutubeを埋め込む方法【初心者にもわかり...

ワードプレスでYoutubeを埋め込む方法【初心者にもわかりやすく解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2021年09月03日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

Youtubeの埋め込みとは?

WEBサイトでは自身のサイト内にデータを持たず外部のサイトにあるコンテンツをページ内に読み込んで表示させることが可能です。

外部サイトのコンテンツをページ内に読み込んで表示させることを「埋め込む」と呼んでいます。

Youtube自体もそうした埋め込みを行ってもらいやすいように各動画の下にボタンが用意されていて有益なコンテンツの共有を簡単に行うことができます。

ワードプレスのサイトに埋め込むには?

ワードプレスのエディターにはそうした埋め込みを簡単に行う機能が標準で備わっています。

このページではワードプレスで作ったページにYoutubeの動画を埋め込む方法について説明します。

Youtubeを埋め込む際の注意点

Youtubeで公開されている動画を埋め込む際は著作権を侵害しないように注意して下さい。許可なく使用した場合、たとえ悪意がなくともトラブルが起きないとは言い切れません。許可を得て使用するか自分でアップロードしたものにとどめておいた方が確実です。

ブロックを使用して埋め込む方法

ワードプレスのエディターに搭載されているブロック機能の中には、Youtube埋め込み用のブロックが標準で備わっていますので、このブロックの機能を利用することでHTMLなどの言語がわからなくてもYoutubeの埋め込みを行うことが可能です。

ワードプレスはバージョン5.8、テーマはTwentyTwentyOneを使用しています。使用環境によっては機能が使えない場合がありますのでご了承下さい。

リンク先のサムネイル
ワードプレスのエディターの使い方

ワードプレスで投稿ページや固定ページを新規作成し公開するために必要な編集画面でのエディターの使用方法や設定、一覧画面でのページ管理の仕方を説明します。...【もっと読む】

Youtubeの動画ページのURLをコピーする

まずはYoutubeのサイトを開いての操作になります。

埋め込みたい動画の視聴ページを開き、ページのURLをコピーしてください。

ブロックを使用して埋め込む方法

Youtubeブロックを挿入する

ワードプレスに戻り、動画を表示させたいページの編集画面を開きます。

左側のブロック一覧から「Youtubeブロック」をクリックして挿入します。

ブロックを使用して埋め込む方法

Youtubeブロックを挿入するとURL入力欄が表示されるのでコピーしたURLを貼りつけます。

ブロックを使用して埋め込む方法

ビジュアルエディター内でも動画が確認できるようになります。

ブロックを使用して埋め込む方法

実際のサイトでも動画が埋め込まれたことが確認できました。

ブロックを使用して埋め込む方法

このようにブロックを使用すれば、掲載元のページで特別な手順を踏むことなく、単にページのURLをコピーするだけで良いので簡単に埋め込むことが可能です。

従来の埋め込み方法

Youtube側にもサイトに埋め込むための機能が用意されているので、それを使用して自身のサイトに埋め込みます。

ブロック機能ほどではありませんが、こちらの方法でも簡単に埋め込むことができます。

動画ページで埋め込みコードを取得する

Youtubeの各動画ページの再生画面には「共有」ボタンがあるので、これをクリックします。

従来の埋め込み方法

続いて「埋め込む」を選択します。

従来の埋め込み方法

すると埋め込み用のHTMLコード(iframe)が表示されるのでコピーします。

従来の埋め込み方法

埋め込みコードを貼りつける

ワードプレスに戻り、HTML編集ができる状態のエディタにコピーした埋め込みコードを貼りつければ完了です。

従来の埋め込み方法

パラメータに追記することで再生方法を制御する

埋め込みコードは、iframeタグのパラメーターに追記することで細かい設定をすることが可能です。前述の手順で取得する埋め込みコードにはあらかじめパラメーターが記述されています。

iframeのパラメーターによるオプション設定

埋め込みサイズ

動画の表示サイズはwidthとheightで指定します。

iframeのパラメーター

再生開始位置

URLの末尾に「?start=30」を追記(数値は秒数)することで、動画を任意の時間から再生開始させることができます。

iframeのパラメーター

自動再生

通常はユーザーが再生ボタンを押すと動画の再生がはじまりますが、URLの末尾に「?autoplay=1」を追記することで、動画を自動再生させることができます。

iframeのパラメーター

ミュート再生

自動再生を有効にしている場合に、急に音声が流れると迷惑に感じるユーザーもいます。そういった場合を含め、ミュートした状態で再生させるにはURLの末尾に「?mute=1」を追記します。

iframeのパラメーター

関連動画を非表示にする

通常はYoutubeでの再生と同様に、埋め込んだ動画も終了すると関連動画が表示されます。自身のサイトにふさわしくないものや意図しない動画が表示される恐れもあり、これらの関連動画を非表示にしたい場合は、URLの末尾に「?rel=0」を追記します。

Youtube側の仕様変更により、「rel=0」を指定した場合は同じチャンネル内の関連動画が表示されるようになっています。そのため今現在、完全に関連動画を表示させないようにする方法はないようです。

iframeのパラメーター

繰り返し(ループ)再生

埋め込んだ動画を繰り返し再生続けるようにしたい場合は、URLの末尾に「?loop=1&playlist=動画ID」を追記します。(動画IDは、src="https://www.youtube.com/embed/動画ID"の部分です。)

iframeのパラメーター

各パラメーターは複数組み合わせて設定することも可能です。組み合わせる場合は「?」ではなく「&」を付けてつなげます。

iframeのパラメーター

まとめ

以上がワードプレスでYoutubeを埋め込む方法です。自作の動画であれば直接videoタグなどで表示させることも可能ですが、動画はファイルサイズも大きいため多くの動画を扱うとサーバーの容量を圧迫してしまいます。その点Youtubeにアップロードした動画を埋め込むという方法をとれば、アカウントを用意してアップロードするという手間は掛かりますがサーバーの容量を気にすることなく動画を扱うことが可能です。

広告
広告

関連する記事

サムネイル

WPでカスタム投稿に対してカスタムフィールドを設置する【プラ……

2024年12月06日
WPのカスタム投稿の編集画面にプラグインを使わずにカスタムフィールドを設置する方法について学んだので備忘録として残しておきます。 カスタムフィールドとは? Wo […]
サムネイル

WPのカテゴリー内の項目(ターム)の表示順を変更【プラグイン……

2024年12月03日
WordPressにおいてカテゴリーの項目(ターム)を一覧表示させたときの表示順をプラグインを使わずに変更する方法を学んだので備忘録として残しておきます。 ター […]
サムネイル

WPのカスタム投稿一覧表への列(カラム)の追加と並び替え【プ……

2024年12月03日
最終更新日:2024年12月05日
WPのカスタム投稿タイプを作ってサイトを構築していく中で、管理画面上での一覧ページに任意の列(カラム)を追加したり、表示順を並び替える方法を学んだので備忘録とし […]
サムネイル

WPのカスタム投稿タイプでカテゴリーやタグを設定できるように……

2024年12月03日
WordPressのカスタムタクソノミーを使ってカスタム投稿タイプにカテゴリーを設定する方法について学んだので備忘録としてまとめます。 カスタムタクソノミーとは […]
サムネイル

WPでカスタム投稿タイプを追加してページを分類する方法

2024年12月03日
WordPressのカスタム投稿機能を使ってぺージを分類する方法について学んだので備忘録としてまとめます。 カスタム投稿タイプとは? WordPressでは、標 […]
サムネイル

WPで下書きページを第三者と共有できるプラグイン【Publi……

2024年11月07日
WordPressにおける下書き状態のページは非ログイン状態では閲覧することができないので、新規追加予定ページをクライアントにチェックしてもらう時の良い方法を探 […]
サムネイル

WordPressの予約語とは?【カスタム投稿タイプ・カスタ……

2024年11月07日
WordPressのカスタム投稿タイプやカスタムタクソノミーを扱うにあたり、予約語について学んだので備忘録としてまとめます。 予約語とは? WordPressで […]