こんにちは、しゃーろです。
現在、Wordpressで日本語学習者向けのオリジナル教材を作っています。
その中で、場面に合った動画を挿入しようと思っているのですが、そのまま動画を挿入するとかなりサイトが重くなってしまうので、YouTubeで公開した動画を埋め込もうと思っています。
ただ、動画を一時停止したときに関連動画が出てくると、正直うっとうしいですよね。
以下のように。
なので、今回は、この関連動画を非表示にする方法を紹介します。
- YouTubeを収益化目的ではなく、教材として利用したい
- WordPressで教材を作成している
- サイトをなるべく軽くしたい
- 関連動画を非表示にしたい
このような方には参考になると思います。
ちなみに、YouTubeにアップするとサイトを軽くできるほか、またその動画を使いたくなったらいつでもダウンロードができます。
なので、念のためといって、パソコンなどにずっと保存しておく必要がないものメリットの1つですね。
挿入したYouTube動画を自動再生、自動ループさせる方法を思いついたので、以下にまとめておきます。
これをすれば強制的に関連動画が非表示になります。
YouTubeに限定公開で動画をアップロード
まずは、使いたい動画を「限定公開」でアップロードします。
限定公開でアップロードすると、リンクを知っている人のみが動画を試聴できます。
なので、サイトに訪れた方にだけ動画を見ていただけるということです。
YouTubeチャンネルには表示されません。
自身のYouTubeチャンネルの右上にある「作成」をクリックし、「動画をアップロード」をクリックします。
チャンネルをまだ作成していない方は、アイコンマークを押して「チャンネルを作成」から作成しましょう。
真ん中の「ファイルを選択」をクリックし、アップロードするファイルを選択します。
タイトルを記入し、視聴者層を選択します。（タイトルは視聴者に表示されます）
限定公開動画であれば、それ以外は特に記載する必要はありません。
右下の「次へ」をクリックし、「公開設定」タブまで移動します。
「動画の要素」や「チェック」は何もしなくて大丈夫です。
公開設定で「限定公開」を選択します。
選択出来たら、右下の「保存」をクリックしましょう。
これで、動画のアップロードが完了です。（処理に時間がかかることがあります）
WordPressのカスタムHTMLにコードを貼り付け
動画がアップロードできたので、Wordpressに動画を埋め込んでいきます。
普通に埋め込むと関連動画を非表示にできないので、カスタムHTMLを使用します。
1. カスタムHMTLにコードを貼り付ける
まずは、以下のコードをWordpressのカスタムHTMLに貼り付けましょう。
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px;">
<iframe src="https://www.youtube.be/embed/〇〇〇?rel=0"
style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;"
allowfullscreen
title="Lesson Video">
</iframe>
</div>2. YouTube動画のIDをコピー
続いて、先ほどアップロードした動画のIDをコピーします。
チャンネルのメニューバーから「コンテンツ」を選択し、該当する動画にカーソルを合わせて「ペンマーク」をクリックします。
画面右側に動画リンクが記載されていると思うので、IDの部分のみをコピーします。
3. 動画のIDをカスタムHTMLに貼り付ける
コピーした動画のIDをカスタムHTMLのコードと合体させます。
コードの「〇〇〇」部分を動画のIDと差し替えます。
これを消してしまうと関連動画を非表示にできません。
IDを貼り付けたら完成です。
動画が終了したときに関連動画が表示されるかもしれませんが、現状ではこちらを非表示にすることは出来ないようです。
動画を一時停止した際の関連動画は非表示にできます。
追記（自動再生と自動ループで関連動画を非表示にする方法）
WordPressのプラグインH5Pを使用して、挿入したYouTube動画を自動再生・自動ループにして、関連動画を非表示にできたので方法を紹介します。
H5Pで使用したコンテンツは「Course Presentation」で、使い方については以下の記事でまとめています。
この記事では、超簡単に設定だけ紹介しますね。
※自動再生機能は、スマホでは機能しない場合があります。
Course Presentationの編集画面を開いたら、タイトルを適当に記入し、上のメニューバーから「ビデオマーク」をクリックします。
タイトルを適当に記入し、ビデオソースの下の「+」をクリックします。
右側のURL貼り付け欄に希望のYouTube動画URLを貼り付け、「Insert」をクリックします。
動画を挿入出来たら、再生設定を開き、「ビデオの自動再生」と「ビデオをループ」にチェックを入れます。
チェックを入れたら、一番下か一番上にある「Done」をクリックします。
動画の大きさを調整しましょう。
一度コンテンツを作成してから再度編集画面に戻ると、画面いっぱいまで伸ばすことができました。
最初は横いっぱいには広げられませんでした。（もう1つのサイトでは最初から横いっぱいにできたんですが）
動画のサイズが調整出来たら、右上の「作成」または「更新」をクリックします。
コンテンツの表示方法は、以下の記事で解説しているので割愛しますね。
まとめ
いかがだったでしょうか？
今回は、YouTubeの関連動画を非表示にする方法を紹介しました。
「これ邪魔だな」と思って調べたら、案外簡単に非表示にできたのでブログで紹介しました。
収益化などをしなければ、広告が入ることもないと思います。（YouTubeの仕様で入ることもあるかも）
この記事が少しでも役に立ったら嬉しいです。
最後まで読んでいただき、ありがとうございました！
