こんにちは、トップページに動画を埋め込みたくて、Google先生に訊きまくっていたカズミィです。
検索しまくっていたね。
親切なサイトを育てるお手伝いにもなります。
サイトに埋め込むYouTube動画を再生させたあとに関連動画を表示させない。この方法は少し前まで簡単にできたとのこと。
Google傘下のYouTubeが変更したことではあるけれど、トップページだけなら許されるかな…と、考えながら使っています。
テーマSANGOでは、トップページに動画を埋め込むときに関連動画を表示させずに貼り付けることができました。
内容をまとめてみますので、よろしければお付き合いくださいね。
仕様が変更されませんように ♪
ページを一番下までスクロールすると見つかります。
トップページの動画に関連動画を表示しない
現在このサイト内では、関連動画を表示させる方法と、表示させない方法を使い分けています。
- 記事内の動画：表示させる
- トップページの動画：表示しない
先にお伝えしなければならないことは、YouTube動画の再生回数は上がりません。
ただ純粋に、トップページに動画を埋め込むためだけにYouTubeを使わせていただきました。
テーマのバージョンなど、使用環境によっても異なるかもしれません。
目次プラグインのアップデートで動画が消えることもありました。
動画サイトをYouTubeに決めるまで
YouTubeをサイトに埋め込むと、動画を見終わったときに関連動画が表示されます。
記事内なら「仕方ないかな」と思うのですが、トップページに他の方の動画が表示されたままになるのは、ちょっと悲しい。
YouTube、Googleドライブ、Vimeo、それぞれの特徴を調べて、家計に響かない程度の価格なら有料を使おうと思いました。
動画を埋め込む際に使う場所
Vimeo
機能的には欲しいものが全てそろっていますが、使いたい機能の含まれた契約はちょっと高額です。
Googleドライブ
少額の使用料を支払えば問題なく使えるので一番に上がった候補でした。
ＰＣ上で記事を書く私にとって、iPhone動画の拡張子を変換する知識が（自分自身に）ないのは致命的、あえなく断念することに。
また、直接動画を入れることになるのでサイトが重くなってしまいます。
YouTube
無料で使えて圧倒的に使い勝手の良いYouTubeですが、最後の選択肢でした。
理由は、再生回数が少ない動画を見ると物悲しく感じられそうだから。
サイトで使う動画は説明に使うものが多くなるため、使い方が違うのではないかと思いました。
YouTube動画を投稿記事に埋め込んだ状態
YouTubeの動画を埋め込むときは、埋め込みたい動画の再生画面で動画下にある「共有」をクリックします。
「埋め込む」を選んだら「URL」をコピーして、投稿画面のYouTube用ブロック内に貼り付けます。
関連動画が表示さる通常の埋め込み方
こちらは、動画が終わると関連動画が表示される通常の埋め込み方です。
トップページで関連動画が表示されない動画
リストのYouTube動画を埋め込んでみた
リストにした動画を上記の方法と同じように、「共有」「埋め込む」「URL」をコピーして、GutenbergのYouTubeブロックを使って埋め込みます。
ちょっと不思議なことが起こるのです。
使うブラウザによっては、リストの最初にある動画のみが再生されて関連動画は表示されません。
GoogleChrome、ios、Edgeなど、使用するブラウザによって関連動画が表示されたり、されなかったりします。
次の項目の説明に必要なので、リスト再生中に、リスト内で再生されているURLをコピーしてYouTubeブロックに貼り付けたものを載せてみます。
最初の動画は37秒ありますが、あとの4本は10秒前後の合計5本です。
記事内では全ての動画が再生されて、最後に関連動画が表示されるはず。
リスト再生中のURLをYouTube専用のブロックではなく、URLのブロックに貼り付けても、上の動画と同じ内容になりました。
SANGOのトップページで関連動画を表示しない
SANGOには外観をカスタマイズできる場所があり、「ウィジェット」でトップページに動画を埋め込むことができます。
先ほどと同じように、リスト再生中にリスト内で再生されているURLをコピーしてYouTubeブロックに貼り付けると、関連動画は表示させずに目的の１つの動画のみが再生されました。
関連動画が表示されない動画はトップページにあります。
画面を一番下までスクロールした場所に置いておきますので、よろしければお立ち寄りくださいね。
YouTubeでリスト再生中のＵＲＬを張り付ける
SANGOトップページの外観カスタマイズを使って「リスト途中にあるひとつの動画だけを再生させる」流れ。
- YouTubeの再生リストを作る
- リストを再生する
- お目当ての動画が再生されるのを待つ
- 動画再生中に上部に表示されているURLをコピー
- カスタマイズのウィジェットへ
- 「YouTubeを埋め込む」を選択
- HTMLを選んで貼り付ける
トップページでは目的の動画の再生が終わると、関連動画は表示されずに最初の画面に戻ります。
プラグインの相性により動画が表示されないこともあります。
関連動画を表示させない方法を見つけた流れ
サイトのトップページに関連動画を表示させたくなくて、動画をリストにして長くしました。動画が流れている間に他の記事を見つけてくれたらいいなと思ったのです。
読者さんにご迷惑をおかけしませんか。
試しに作ってみようとしただけなのです。
お許しください…
動画リストで試している最中に、思いがけず関連動画を表示させないという目的が達成できました。
まとめ
Google先生傘下のYouTubeの設定が「関連動画」を表示させる仕様に変わったのであれば、この方法はもしかしたら、Google先生の意向に沿わないのかもしれません。ちょっと心配なので使い分けることにしました。
記事内では関連動画を表示させるようにし、トップページの動画のみ関連動画を表示させない方法を使っています。許してもらえますように…
カズミィのもうひと言
YouTubeを使う前は、動画を埋め込むときにTwitterに上げてから使っていました。
GutenbergのTwitterブロックを使い始めると、Twitterの動画や画像が表示されません。classicブロックを使ってコードを書き込みながら表示させてきましたが、ちょっと手間がかかります。
勉強不足なだけならすみません。
何とかラクにならないかと考えたことで今回の使い方を発見しました。サイト運営は奥が深いですね。（仕様が変わりませんように…）
最後までお読みいただきありがとうございました。
Gutenbergへの移行作業も終わりに近づき、新たな勉強を始められたらいいな…と、考えているカズミィでした。
にほんブログ村
「ブログ村」ポチっと応援お願いします♪
