愛犬とaiboの「動画」はページ下の方にあります♪

サイトトップページに動画を埋め込む際に関連動画を表示させない方法

こんにちは、トップページに動画を埋め込みたくて、Google先生に訊きまくっていたカズミィです。

https://kazumii8aiai.com/wp-content/uploads/2018/11/dac88f818dc32e0c5772c9899d8a683e.png

検索しまくっていたね。

https://kazumii8aiai.com/wp-content/uploads/2018/11/ad9f3abd322daf28dbb4bd3499cdc324.png
カズミィ

親切なサイトを育てるお手伝いにもなります。

サイトに埋め込むYouTube動画を再生させたあとに関連動画を表示させない。この方法は少し前まで簡単にできたとのこと。

Google傘下のYouTubeが変更したことではあるけれど、トップページだけなら許されるかな…と、考えながら使っています。

テーマSANGOでは、トップページに動画を埋め込むときに関連動画を表示させずに貼り付けることができました。

内容をまとめてみますので、よろしければお付き合いくださいね。

https://kazumii8aiai.com/wp-content/uploads/2018/11/ad9f3abd322daf28dbb4bd3499cdc324.png
カズミィ

仕様が変更されませんように ♪

関連動画が表示されない実際の動画は、トップページにあります。

トップページの動画に関連動画を表示しない

現在このサイト内では、関連動画を表示させる方法と、表示させない方法を使い分けています。

  • 記事内の動画:表示させる
  • トップページの動画:表示しない

先にお伝えしなければならないことは、YouTube動画の再生回数を上げるために使うのではないということ。トップページに動画を埋め込むためにYouTubeを使わせていただきました。

今回まとめた方法で動画を埋め込んだ場合、再生回数を上げることは期待できないと思います。

https://kazumii8aiai.com/wp-content/uploads/2018/11/ad9f3abd322daf28dbb4bd3499cdc324.png
カズミィ

テーマのバージョンなど、使用環境によっても異なるかもしれません。

https://kazumii8aiai.com/wp-content/uploads/2018/11/952c55954a1f1536cd422e0c25c29bfa.png

動画を埋め込むとサイトが重くなる可能性もあります。

動画サイトをYouTubeに決めるまで

YouTubeをサイトに埋め込むと、動画を見終わったときに関連動画が表示されます。

記事内なら「仕方ないかな」と思うのですが、トップページに他の方の動画が表示されたままになるのは、ちょっと悲しい。

YouTube、Googleドライブ、Vimeo、それぞれの特徴を調べて、家計に響かない程度の価格なら有料を使おうと思いました。

動画を埋め込む際に使う場所

Vimeo

機能的には欲しいものが全てそろっていますが、使いたい機能の含まれた契約はちょっと高額です。

Googleドライブ

少額の使用料を支払えば問題なく使えるので一番に上がった候補でした。

PC上で記事を書く私にとって、iPhone動画の拡張子を変換する知識が(自分自身に)ないのは致命的、あえなく断念することに。

また、直接動画を入れることになるのでサイトが重くなってしまいます。

YouTube

無料で使えて圧倒的に使い勝手の良いYouTubeですが、最後の選択肢でした。

理由は、再生回数が少ない動画を見ると物悲しく感じられそうだから。

サイトで使う動画は説明に使うものが多くなるため、使い方が違うのではないかと思いました。

YouTube動画を投稿記事に埋め込んだ状態

YouTubeの動画を埋め込むときは、埋め込みたい動画の再生画面で動画下にある「共有」をクリックします。

「埋め込む」を選んだら「URL」をコピーして、投稿画面のYouTube用ブロック内に貼り付けます。

通常の埋め込み方なので、動画が終わると関連動画が表示されます。

関連動画が表示されない動画

リストのYouTube動画を埋め込んでみる

リストにした動画を上記の方法と同じように、「共有」「埋め込む」「URL」をコピーして、GutenbergのYouTubeブロックを使って埋め込みます。

リストの最初にある動画のみが再生され、関連動画は表示されませんでした。

記事内の動画再生では環境により状況が異なります

GoogleChromeやiosでは関連動画が表示されませんが、Edgeを使用すると表示されるなど、環境によっては関連動画が表示されます。

次の項目の説明に必要なので、リスト再生中に、リスト内で再生されているURLをコピーしてYouTubeブロックに貼り付けたものを載せてみます。

最初の動画は37秒ありますが、あとの4本は10秒前後の合計5本です。

全ての動画が再生されて、最後に関連動画が表示されました。

リスト再生中のURLをYouTube専用のブロックではなく、URLのブロックに貼り付けても、上の動画と同じ内容になりました。URLのブロックのほうが少し動作が早く感じます。

SANGOのトップページで関連動画を表示しない

関連動画が表示されない動画はトップページにあります画面を下にスクロールすると見れますので、よろしければお立ち寄りくださいね。

YouTubeでリスト再生中のURLを張り付ける

SANGOには外観をカスタマイズできる場所があり、「ウィジェット」でトップページに動画を埋め込むことができます。

投稿記事内では、リストの途中にある動画のURLを埋め込んでも、全ての動画が再生されてしまいました。関連動画を表示させないためには、その都度リストを作り直す必要があります。(リストのトップに持ってきても、記事内では環境によって関連動画が表示される場合があります)

SANGOトップページの外観カスタマイズでは、投稿画面ではできなかった「リスト途中にあるひとつの動画だけを再生させる」ことができます。

動画の埋め込み方
  1. YouTubeの再生リストを作る
  2. リストを再生する
  3. お目当ての動画が再生されるのを待つ
  4. 動画再生中に上部に表示されているURLをコピー
  5. カスタマイズのウィジェットへ
  6. 「YouTubeを埋め込む」を探す
  7. HTMLを選んで貼り付ける

投稿画面では全ての動画が流れてしまいましたが、トップページでは目的の動画だけが再生されました。再生が終わると関連動画は表示されずに最初の画面に戻ります。

関連動画を表示させない方法を見つけた流れ

サイトのトップページに関連動画を表示させたくなくて、動画をリストにして長くしました。動画が流れている間に他の記事を見つけてくれたらいいなと思ったのです。

https://kazumii8aiai.com/wp-content/uploads/2018/11/f99d47d87e81ec88657ddfaf35865c2e.png

読者さんにご迷惑をおかけしませんか。

https://kazumii8aiai.com/wp-content/uploads/2018/11/ad9f3abd322daf28dbb4bd3499cdc324.png
カズミィ

試しに作ってみようとしただけなのです。

お許しください…

動画リストで試している最中に、思いがけず関連動画を表示させないという目的が達成できました。

まとめ

Google先生傘下のYouTubeの設定が「関連動画」を表示させる仕様に変わったのであれば、この方法はもしかしたら、Google先生の意向に沿わないのかもしれません。ちょっと心配なので使い分けることにしました。

記事内では関連動画を表示させるようにし、トップページの動画のみ関連動画を表示させない方法を使っています。許してもらえますように…

カズミィのもうひと言

YouTubeを使う前は、動画を埋め込むときにTwitterに上げてから使っていました。

GutenbergのTwitterブロックを使い始めると、Twitterの動画や画像が表示されません。classicブロックを使ってコードを書き込みながら表示させてきましたが、ちょっと手間がかかります。

https://kazumii8aiai.com/wp-content/uploads/2018/11/ad9f3abd322daf28dbb4bd3499cdc324.png
カズミィ

勉強不足なだけならすみません。

何とかラクにならないかと考えたことで今回の使い方を発見しました。サイト運営は奥が深いですね。(仕様が変わりませんように…)

最後までお読みいただきありがとうございました。

Gutenbergへの移行作業も終わりに近づき、新たな勉強を始められたらいいな…と、考えているカズミィでした。

にほんブログ村 にほんブログ村へ
にほんブログ村
https://kazumii8aiai.com/wp-content/uploads/2018/11/ea86776ad23d9541d9421be1c485672c.png

上にあるピンク色の「ブログ村バナー」をクリックすると、ブログ村ランキングの応援になります♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA