WordPress のページ&ブログへYouTube動画の埋め込み方法【2021年最新版】

WordPress のページ&ブログへYouTube動画の埋め込み方法

YouTube の動画をあなたのページやブログの記事に埋め込む方法を説明します。

主にでYouTube の動画をあなたのサイトに載せるのには大きく分けて二つの方法があります。

方法1)リンクを載せる

このリンクというのは YouTube の動画そのものではなくてそのリンクをクリックすると YouTube のサイトに行って動画が流れるというもの

方法2)YouTube Videoをあなたのページやポストに直接埋め込む

今回説明するのはこの YouTube の動画そのものをあなたのサイトのページまたはブログの記事などに直接埋め込む、はめ込んでページ上で動画を再生することができるその方法を説明していきたいと思います。

一番簡単の埋め込み方法YouTubeブロック使用

WordPress のサイトのダッシュボードにログイン

最初にあなたの WordPress のサイトのダッシュボードに行きます。

(ダッシュボードへのログイン。一般的には sitename.com/wp-admin でダッシュボードへログインするページにジャンプすることができます。ユーザーネームとパスワードを入力してダッシュボードに入ります)

YouTubeビデオを埋め込みたいページの編集ページへ

ダッシュボードに入ったら、自分がYouTubeビデオを埋め込みたい投稿または固定ページに行きます。ここでは固定ページのサンプルページに行きますけれどもこのサンプルページの編集ですねまたはこのページのタイトルをクリックしてください。

ブロックエディターでYouTubeブロックを追加

今回は WordPress 標準のブロックエディター(グーテンバーグエディターとも呼ばれます)を使用して説明します。

ここでは画面の一番下に既に入っている文章の下に新しいブロックを足してそこに埋め込むという作業をします。

最後の文字のところでカーソルが点滅している状態で、 キーボードの Enter キーを押します。すると

「ブロックを選択するにはスラッシュを入力」と指示が出てますのでここで実際にキーボード上のスラッシュ「/」を押します。

とするとポップアップ画面が表示されます。ここにあなたが埋め込みたいブロックの種類を入力することによっていろいろなものを検索をかけることができるんですね。

ここではまず 「YouTube 」と入れていくと…このように YouTube のアイコンが出てきます。それをクリックします。この YouTube URL と言うことで埋め込む URL を入力というところでカーソルが Blink しています。つまり点滅してる状態ですね

YouTubeから動画のリンクをコピー

この状態でまず YouTube のサイトに行きますでそこから自分がシェアしたい動画を開いてこの共有というボタンを押しますそうしますとコピーという項目が出てきます。このコピーボタンを押すと勝手に「このリンクをコピークリップボードにコピーしました」としてコピーしてくれます。なのでここでもう一回ですねこの WordPress のページに戻ってきてこの埋め込み URL を入力と言うところで右クリックをしてペーストするかこれを左クリックでペーストを押すかですねまたはキーボードのMacであれば command ボタンとをホールドしながら[ V ]または Windows でしたらコントロールキーを押しながら[ V ]を押すとこのようにですね今コピーしたものが提出されますあとはこの埋め込みというこの青いボタンを押すだけで動画を埋め込むことができます。

一番最初の一番簡単な方法だと思いますより小さな端末にリサイズという項目が右にありますが、ここをオフにすると例えば小さなデバイスでこのページが再生されていても動画の質を落とさず再生されます。

オンにしているとネットの速度や表示しているスマホ画面の大きさに応じ、画質を落として表示してくれると言う機能をオンにすることができます。

埋め込みコードを使って埋め込む方法

一番最初と同じように自分が動画を埋め込みたい場所の一つ前のブロックの最後のスペースをくりくしカーソルを点滅させます。

Enter キーを押します。前回はスラッシュを押してから検索して行きましたがもうひとつのやり方があります。

この画面の右側に黒いプラスボタンが出ており、これを押しても同じように検索をかけて同じ操作ができます。

ショートコードブロックを追加

ここではショートと言う風に入れていきます。そうするとこのショートコードというブロックが選択できます。

でこれをクリックするとここにショートコードを入力ということでさっきとは少し違ったブロックが表示されます。

YouTube 動画埋め込みコードを取得

先ほどと同じように YouTube に行き、今度はこの先ほどの共有からこのコピーではなく「埋め込む」というボタンがありますがこれをクリックします。

そうするとちょっと違った画面が出てきますがここではプログラムのコードのようなものができますでここではもうちょっと細かい設定ができます。

開始時間の設定

たとえば開始時間を指定することができます。
例えば再生ボタンを押すと一番最初ではなくて 5 0 秒目から勝手にスタートしてくれると言う設定をすることにします。

プレーヤーコントロールバー

またはこのプレーヤーコントロールバーを表示するというのが標準ではオンになっていますが、外すと、仮にプレーヤーを再生した場合に、動画が巻き戻しや早送りができなくなります。つまりオンにしていくと見ている人が勝手に飛ばしたり先に前に戻ったりできるようになります。

ブログ 動画 埋め込み

プライバシー強化モード

プライバシー強化モードを有効にすると誰かがあなたのページに来た時点では YouTube に情報が流れないように設定できます。

再生された時に初めてその観覧者がどういったユーザーデバイスからアクセスしているかなどのデータが YouTube に送信されます。訪問者のプライバシーに配慮するのであればこれをオンにしてもいいと思います。同時にアクセス解析用に必要なデータも少なくなります。

あとはコピーを押すとこのコードがクリップボードにコピーされます。

先ほどと同じように WordPress のページに戻ってくるとこのショートコードのところが点滅してますのでここで。

ペーストします。そうすると今の長いコードが全部埋め込まれます。先ほどとは違ってこの画面上ではプレビューは見られませんので、ページの更新を押します。

更新ボタンを押したら、実際にページを表示して確認しましょう。動画がちゃんと貼り付けられています。

再生ボタンを押すと指定した。50 秒からスタートし、早送りや巻き戻しなどのコントロールができないですね(そう設定していれば)

これが2つ目の方法ですねこれを使い分けることによって好きな動画を埋め込んでですね多少設定を変えることができます。

これが YouTube の動画を埋め込む方法なんですけれども実は今日はもうひとつ紹介したい方法があるんですね

Presto Player( プレストプレーヤー)を使う

プレストプレーヤーは動画再生プレーヤープラグインです。
これを使うことによって、 YouTube の動画埋め込みにあなたのブランディングも追加してつまり YouTube のブランディングをなるべく少なくして見せることができるとても優れたプラグインです。
ここからはPresto Playerを使った動画の埋め込み方というのをこれで紹介していきたいと思います。

プレストプレーヤーをインストール

まずそれにはプラグインを追加しますのでダッシュボードに戻ります。

プラグインの新規追加に行き、検索バーにPresto Player と入力するか、または
https://go.digital-sensei.com/presto-free
からダウンロードできます。

アルティメットビデオプレイヤー for WordPress プレストプレーヤー見つけたら、今すぐインストールをして、有効化します。

このプレストプレーヤーはワードプレス標準のブロックエディターをベースに作られていますので同じようにさっきと同じように固定ページの一覧から、サンプルページに行きます。

先ほど、ショートコードを入力したブロックは削除し、新しいブロックを追加します。

Presto Player YouTubeブロックを追加

空白のブロックエリアには、プラスがありますけれどもここから入ってもいいですしまたはもう1つ3つ目の方法としてこの画面の左上にある大きなブルーのプラスボタンを押すと全部のブロックが表示されます。この中 のPresto内に、ブロックが三つ増えているのが分かると思います。 Presto YouTube Videoというブロックを追加します。

ブロックが追加されると、 YouTube の URL を入力するスペースが表示されます。このプラグインは現在英語でしか利用できなのですが、このプレストプレーヤーの使い方を紹介しているビデオを私が作っていますのでよかったらそのビデオもこの YouTube からリンクからご覧になれます。

プレストプレーヤー使い方と詳細説明ビデオ
https://youtu.be/GyyO9fmi8E4

また、プレストプレーヤーのプロフェッショナル版にご興味があれば、以下のリンクから購入された方には全日本語解説の動画コースをご提供しますので、そちらも参照にしてみてください。

有料版プレストプレーヤー Presto Player 👉 https://go.digital-sensei.com/prestoplayer

本題に戻りますが、先ほどと同じように今度は同じ動画を「共有」から今度は「リンク」をコピーします。

ワードプレス ユーチューブ 埋め込み

YouTube URLにペーストして、Add Videoを押すとこのように埋め込むことができます。

すぐに気づくかもしれませんが、Presto Playerで埋め込んだ場合は、YouTube のロゴが表示されず、 YouTube のブランディングを隠すことができる。これがすごいいいわけですね。

右側のブロックエディターのところを見てもらうと色々とカスタムできる項目があります。

ワードプレス Youtube 埋め込み

Proと付いている項目は有料版でしかできませんが、無料版でもかなり使えます。

Presto Player オートプレイ

たとえば「オートプレイ」っていうのはこのページに来た瞬間に勝手に再生が始まる機能。

Presto Player 動画インライン再生

Play inline というのはどう言った機能かというと…

一般的にスマホでビデオを見た時にビデオを再生するとその見ている画面がすべて真っ暗になって動画のみが見えるという再生のされ方主流ですが、このPlay Inline 機能をオンにしておくとビデオが再生されつつもそのページ上にあるコンテンツ文章は読み続けられる再生方法です。

それがPresto Playerにはついています。これも大きな機能のひとつです。それ以外にも動画のサムネイルを YouTube のサムネイルと別に設定することができます。(ここではポスターという言い方をしています)

またはいくつかプリセットがあり、たえばミニマルというこうこう押すと、プレーヤーは再生ボタンだけになります。なので再生するかストップするかっていうコントロールしかできなくなります。

コースというのを選ぶと再生ボタンと巻き戻しあとボリューム設定といったものが全部使えるようになります。
それ以外にも自分だけのオリジナル設定というのができますが、それはプロ用有料版だけの機能ってます

グローバルブランディングというのを押すと再生ボタンとボリューム変更のボタンのこの色を変えることができます。通常のYouTube の埋め込みの場合は全て赤、 YouTube の色になってしまいますが、このプレストプレーヤーのプラグインを使うとこのコントロールができるようになります。

ご自分のビジネスのブランド色が例えば黄色だとします。その場合は、全部これで黄色でまとめることでできてしまいます。

こういったことができるのがこのプレストプレーヤーですでとても素晴らしい部分です。
高機能でありながら軽くできてますから使ってもほとんどウェブサイトのスピードには影響しません。

もちろん上で最初にご紹介した二つの方法を使用しても埋め込み自体は可能です、しかし追加機能が豊富なプレストプレーヤーを使わない手はないと私は思います。

プレストプレーヤーのもう少し詳しい情報に関しては別のビデオを参考にしていただいてもし有料版に興味がある場合はまたそこもこのVideo のShownoteからですねリンクでチェックしていただければと思います。

Presto Player 無料版
👉https://go.digital-sensei.com/presto-free

Presto Player 有料版
👉 https://go.digital-sensei.com/prestoplayer

Source Article
https://digital-sensei.com/wordpress-youtube-embed-prestoplayer/

Related Articles


Fatal error: Uncaught Error: Class 'Breeze_Options_Reader' not found in /home/495953.cloudwaysapps.com/gyvbpdypum/public_html/wp-content/plugins/breeze/inc/class-breeze-lazy-load.php:183 Stack trace: #0 /home/495953.cloudwaysapps.com/gyvbpdypum/public_html/wp-content/plugins/breeze/inc/cache/execute-cache.php(282): Breeze_Lazy_Load->apply_lazy_load_feature() #1 [internal function]: Breeze_Cache_Init\breeze_cache() #2 /home/495953.cloudwaysapps.com/gyvbpdypum/public_html/wp-includes/functions.php(5275): ob_end_flush() #3 /home/495953.cloudwaysapps.com/gyvbpdypum/public_html/wp-includes/class-wp-hook.php(307): wp_ob_end_flush_all() #4 /home/495953.cloudwaysapps.com/gyvbpdypum/public_html/wp-includes/class-wp-hook.php(331): WP_Hook->apply_filters() #5 /home/495953.cloudwaysapps.com/gyvbpdypum/public_html/wp-includes/plugin.php(476): WP_Hook->do_action() #6 /home/495953.cloudwaysapps.com/gyvbpdypum/public_html/wp-includes/load.php(1102): do_action() #7 [internal function]: shutdown_action_hook() #8 {main} thrown in /home/495953.cloudwaysapps.com/gyvbpdypum/public_html/wp-content/plugins/breeze/inc/class-breeze-lazy-load.php on line 183