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

WordPress

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

2020年1月31日

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

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

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

 

■Youtubeの埋め込み例


 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト


 


 

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

ブロッエディター版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が表示されている(ビジュアル画面)
 
 

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

クラシックエディターをご利用の場合、Youtubeの埋め込みオプション設定を設定できます。
 

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

■動画終了後に同じチャンネルのみの関連動画を出す(別のチャンネルの動画を表示しない)


 

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

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

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


 

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

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


 

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

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

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

 

ブロックエディターでカスタムHTMLを利用してYoutubeを埋め込む

なお、ブロックエディターを利用していて、途中から再生させたいなどのオプション設定をしたい場合は、ブロックでカスタムHTMLを選択することで、クラシックエディターと同じようにiframeタグを使ってのYoutubeの埋め込みと同様のやり方ができるようになります。
 

ブロックエディターでカスタムHTMLを選択
ブロックエディター >カスタムHTML
 

カスタムHTMLでiframeを貼り付ければ完了
ブロックエディター >カスタムHTMLにYoutubeのiframeを埋め込む
 
 

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

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

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

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

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

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

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

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

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

 
 

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

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

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

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

合わせて読みたい記事

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

 

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

 

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

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

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

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

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

 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

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

詳細はこちら


 


 

検索して記事を見つけたい方はこちら

検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

おすすめ記事3選

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

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

【WordPressホームページの作り方総まとめ 12STEPで解説】

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

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-,

© 2020 WEBST8のブログ Powered by AFFINGER5