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

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

投稿日:

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

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

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にアップロードした動画を埋め込むという方法をとれば、アカウントを用意してアップロードするという手間は掛かりますがサーバーの容量を気にすることなく動画を扱うことが可能です。

関連する記事

サムネイル

ワードプレスの固定ページにPHPファイルを読み込む方法【ショ……

2023年12月04日
ワードプレスの固定ページ(投稿ページ)内にPHPを書いたり、PHPファイルを読み込ませることができたら便利ですよね。「PHPファイルを作成して、ショートコードを使って固定ページ内に読み込ませる」という方法をご紹介します。
サムネイル

コンタクトフォーム7のショートコードをテーマファイル内に埋め……

2023年11月24日
テーマファイル(PHPファイル)内にコンタクトフォーム7のショートコードをそのまま記述しても、フォームを呼び出すことはできません。
サムネイル

ワードプレスで前後の記事の公開日を取得して表示する方法【ge……

2023年10月01日
最終更新日:2023年09月12日
ワードプレスの投稿ページで前後の記事の公開日を表示させたいときはget_previous_postとget_next_post関数を使います。
サムネイル

Elementor(エレメンター)の使い方を徹底解説【ページ……

2023年03月09日
最終更新日:2023年03月10日
Elementorは直感操作でワードプレスのサイトを構築できるページビルダープラグインです。ウィジェットをドラッグアンドドロップしていくだけでページのレイアウトを作成することが可能です。
サムネイル

ワードプレスのログイン画面をカスタマイズする方法【プラグイン……

2023年03月07日
最終更新日:2023年12月08日
ワードプレスのログイン画面はカスタマイズしてロゴや背景を変更することができます。ログイン画面のカスタマイズはプラグインを使うかfunctions.phpを編集して行います。
サムネイル

ワードプレスのコンタクトフォーム7で自動返信メールを設定する……

2023年02月28日
最終更新日:2023年03月10日
ワードプレスのContact Form 7プラグインを使って自動返信メールを設定する手順を解説します。フォームの編集画面で「メール(2)を使用」にチェックを入れると、設定項目が表示されて自動返信ができるようになります。
サムネイル

ワードプレスでログイン履歴を確認する方法【SiteGuard……

2023年01月26日
最終更新日:2023年03月10日
多くのセキュリティ対策プラグイン「SiteGuard WP Plugin」を使ってログイン履歴を確認する方法について解説します。