WordPressにYouTube動画を埋め込み・表示する方法

WordPressエディター操作

【2021年版】WordPressにYoutube動画を埋め込む方法

2020年1月31日

今回は、Youtube動画をWordPress(ワードプレス)に埋め込む方法説明します。

2018年末から標準となったブロックエディター (グーテンベルグ エディター)にも対応しています。
 

お店の動画を作ったのでYoutubeにアップしたんだけど、ホームページでも表示できないかしら。。他のホームページでよく見かけるけど
Youtubeをサイトに埋め込むのは意外と簡単ですよ。ここでは、下記のようにYoutube・GoogleMAP・ストリートビューの3種類を埋め込む方法をご紹介しますね。

 

■【2021年版】WordPressにYoutube動画を埋め込む方法(動画解説版)


 


 

「youtube」の動画をWordPressに埋め込む方法

【方法1】カスタムHTMLブロックを利用してYoutubeを埋め込む

カスタムHTMLを選択することで、Youtubeを受け込むことができます。
 

まず自分のサイトに埋め込みたい「youtube」の動画を探します。対象の動画の下にある「共有」ボタンを押下します。
Youtube 埋め込みたい動画を探して共有ボタンを押下する
 

「埋め込む」をクリックします。
Youtube 埋め込むを選択
 

下記のように動画の右横に「動画の埋め込み」と表示されます。動画の埋め込みコードをコピーしてください。
Youtube 埋め込みコードをコピー
 

つぎに、ワードプレスの管理画面に映ります。埋め込みたいページ編集画面(投稿または固定ページ)を開き、カスタムHTMLブロックを追加します。
カスタムHTML
 

カスタムHTMLブロックが挿入されました。

 

カスタムHTMLでYouTubeでコピーした埋め込みコードを貼り付けます。必要に応じて更新・保存しましょう。
カスタムHTMLでYouTubeでコピーした埋め込みコードを貼り付けます。
 

プレビューを確認すると、YouTubeが埋め込まれていることを確認できました。
カスタムHTMLブロックが挿入されました。

 
 

Youtube埋め込みオプション設定

パラメーターを設定することでYoutubeの埋め込みオプション設定を設定できます。
 

■関連動画を同チャネルに限定する

「youtube」動画の再生が終了すると、関連動画が表示されます。埋め込みコードの中のURLの後ろに「?rel=0」を追記すれば、同じチャンネルのみの関連動画を出すようになります。

?rel=0
 

■動画を途中から再生、あるいは途中で停止する

例えば動画を30秒後から再生したい場合は、埋め込みコードの中のURLの後ろに「?start=秒数」を追記すれば、30秒後から再生されます。
Youtube埋め込み 30秒後の例
 

■30秒後からスタートする例

反対に、15秒後に停止したければ、埋め込みコードの中のURLの後ろに「?end=秒数」を追記すれば、30秒後に再生が止まります。
 

■15秒後にストップする例


 

「?start=秒数」と「?end=秒数」を使って、動画の一部分のみを再生させることも可能です。「?start=秒数&end=秒数」で動画のどの部分を再生するか指定することができます(パラメーターを&で連結)。
 

■30秒後から開始して、35秒後(5秒後)にストップする例


 

(注意)埋め込めない動画もある

動画のアップロード主が、埋め込みを不許可にした場合は、動画は埋め込むことができません。

最近は、著作権の問題が、大きく取り上げられるようになり「埋め込み無効」も増えてきています。「youtube」の埋め込みコードの欄に「リクエストによる埋め込み無効」と表示された場合は、動画を埋め込むことはできません。

 

【方法2】Youtube埋め込みブロックで埋め込む方法

つぎに、Youtube埋め込みブロックで埋め込む方法をご紹介します。
 

まず自分のサイトに埋め込みたいYoutubeを探します。URLをコピーしてください。
反映したいYoutubeのURLをコピーする
 

固定ページ(または投稿ページ)の編集画面を開きます。「+」を押してブロックの追加画面を開きます。
固定ページ(または投稿ページ)で+ボタンでブロックを追加
 

「埋め込み」を選択します。
埋め込みを選択
 

「Youtube」を選択します。
Youtubeを選択
 

YoutubeのURLを貼り付けて「埋め込み」ボタンを押下します。
YoutubeのURLを貼り付けて「埋め込み」ボタンを押下する
 

Youtube動画が反映されます。プレビューボタンを押下して、画面を確認してみましょう。
Youtube動画が反映されます
 

Youtube動画が表示されていることを確認して完了です。
プレビューで動画が表示されていることを確認します
 

合わせて読みたい記事

なお、WordPressのブロックエディター の使い方を詳しく勉強したい方は「【2020年版】WordPressブロックエディターの使い方を徹底解説」を合わせてご参照ください。

 

Youtube動画を途中から再生させたいなどのオプション設定したい場合は、後述のカスタムHTMLブロックでiframeの埋め込みすることでオプション設定ができます。
 
 

(補足)従来のクラシックエディター版Youtube埋め込み方法

補足として、WordPressの従来のクラシックエディターを利用している方向けに、クラシックエディターでのYoutubeを埋め込み方を説明していきます。
 

まず自分のサイトに埋め込みたい「youtube」の動画を探します。対象の動画の下にある「共有」ボタンを押下します。
Youtube 埋め込みたい動画を探して共有ボタンを押下する
 

「埋め込む」をクリックします。
Youtube 埋め込むを選択
 

下記のように動画の右横に「動画の埋め込み」と表示されます。動画の埋め込みコードをコピーしてください。
Youtube 埋め込みコードをコピー
 

つぎに、ワードプレスの管理画面に映ります。埋め込みたいページ編集画面(投稿または固定ページ)を開き、「ビジュアル」から「テキスト」へ切り替えて、動画を表示させたい箇所に埋め込みコードを貼り付けます。
Youtube をワードプレスの投稿画面に貼り付け(テキストエディタを選択))
 

投稿画面をビジュアルモードに変更すると動画を確認することができます。公開して完了です。
ワードプレス youtubeが表示されている(ビジュアル画面)
 
 

ページにパスワードをかければ限定動画サイトが作れます

WordPressの固定ページ(または投稿ページ)にパスワードをかければ限定動画サイトが作れます。
 

固定ページまたは投稿ページの公開>パスワード保護を選択します。
公開>パスワード保護を選択
 

設定したい任意のパスワードを入力してください。
パスワードを入力
 

ページを開くと、パスワード入力画面が表示されます。
パスワード入力画面が表示されます
 

パスワード保護設定をしたページについては、パスワードを知っている人だけがページを閲覧できるようになります。
 

自分でアップロードしたYoutube動画を利用する場合、Youtube側で限定公開すれば、基本的にWordPressでパスワードを知っている人だけが見れる動画として見せることができます。

(※)厳密にはYoutubeのURLを知っていれば見ることができます。
 

セミナー参加者向けの動画特典とかで使えそうですね!

 
 

まとめ 埋め込みを活用して動きのあるページを作ろう

いかがでしたでしょうか。今回は「Youtube」をWordPressで表示する方法をご紹介しました。
 

比較的簡単な操作ですが、外部のサービスを自分のホームページやブログ内に取り込むことで動きのあるページを作ることができます。
 

ここでは割愛しますが、Googleマップ・ストリートビュ0Twitterや他のWebサービスも似たようた手順で埋め込みコード取得して自分のサイトに貼り付けることができます。
 

合わせて読みたい記事

今回は、Youtubeを埋め込み表示する方法をご紹介しましたが、下記にGoogleMapやストリートビューの埋め込み表示方法に関する手順も説明しています。ご興味ある方は合わせてご参照ください。
 
【WordPress】GoogleMap(グーグル マップ)を埋め込む方法

 

【WordPress】Googleストリートビューを埋め込み・表示する方法

 

便利な機能ですのでぜひ活用してみてください。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

合わせておすすめしたい記事

●WordPressのブロックエディターの使い方を詳しく勉強したい方は「【2020年版】WordPressブロックエディターの使い方を徹底解説」を合わせてご参照ください。

●WordPressの使い方全般をしっかり勉強したい方は「【2020年版WordPress(ワードプレス)の使い方総まとめ】」をご参照ください。

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 


 

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-WordPressエディター操作
-