YouTubeリンクが埋め込めない!? noteの仕様とちょっとした工夫の話｜埋め込みが出来る時と出来ない時があるので調べてみた

ぼくのいつも仲良くしてもらっているnoterさんからYouTubeのリンクをnoteにうまく張り付けられない（埋め込めリンクにならない）という記事をお見掛けしました。

※急な引用をしてしまいすみません🙇

ちょうどトップ画像（↑一番上）のようになってしまう状態でして、自分も同様の現象を経験したことがあり、「確かにあるある！」と思いました。

一方で、更に試すと張り付けられる時と、そうではない時がありそうなので、noteにおけるYouTubeの貼り付けの法則を調べてみました。

結論としては、うまく貼り付けられない状況は回避できそうです。ただ、上手く張り付けるにはひと工夫が必要です。

症状の確認｜埋め込みリンクになる例/ならない例

せっかくですので、noteさんのYouTubeの一番人気の動画で検証してみたいと思います。

うまくいく例）：サムネが出ている

うまくいかない例）：サムネは出ず無名のカード状態になる

このように、うまく埋め込まれる時と、埋め込まれない時があります。この差を調べてみるとある点に行きつきました。

挙動の差は、YouTubeのアドレスにリクエストの有無が影響している

同様に悩まれて方もいらっしゃるようで、noteクリエイターの「ハツ」さんの記事に詳しく書かれておりましたので、参考に引用させていただきました。急な引用をしてしまい申し訳ないです🙇

ハツさんの記事によりますと、純粋なYouTubeリンクであれば問題なく埋め込みリンクになりますが、リクエストが追加されていると、埋め込みリンクにならずカード上になるようです。

たとえば次のようなアドレスです（変換されてしまうので先頭の文字を全角にしております）

うまくいくOKのサンプル
Ｈttps://www.youtube.com/watch?v=5fQS6fwFZWc

うまくいかないNGのサンプル
Ｈttps://www.youtube.com/watch?v=5fQS6fwFZWc&t=2s

これらは、上記の動画と同じアドレスです。うまくいく場合は、
「/watch?v=5fQS6fwFZWc」の部分が動画のアドレスとなっておりまして、この場合は問題なくサムネが出ます。

しかし、「/watch?v=5fQS6fwFZWc&t=2s」のように、&t=2sなどのリクエストが付いていると変換されません。ちなみにこのリクエストは2秒後から再生するという意味です。

個人的には、リクエストが付いていても変換されてほしいところです。そこでnoteの運営者様にお問合せをしようと思いましたが、ハツさんの記事によるとすでに5年も前からのことなので、おそらく仕様だと思われたのでお問合せは止めておきました。

見つけたこと：短縮URL(youtu.be）を使えば回避可能

しかし、ここで諦めてはちょっと悔しい・・・。何か手はあるはずと思い、もう少し調べてみることにしました。すると、短縮URL(youtu.be)を使えば回避できることがわかりました。
【※短縮URLとは、長くて複雑なYouTubeのURL(アドレス）を、短く分かりやすくしたものです。】

基本的なアドレスをyoutu.beへ変換

Ｈttps://www.youtube.com/watch?v=5fQS6fwFZWc
↓
Ｈttps://youtu.be/5fQS6fwFZWc

余分なものが付いたアドレスをyoutu.beへ変換

Ｈttps://www.youtube.com/watch?v=5fQS6fwFZWc&t=2s
↓
Ｈttps://youtu.be/5fQS6fwFZWc?t=2

いかがでしょうか。正式アドレスの途中までyoutu.beで置き換えられていることがわかります。時刻を設定するときは、&と?で結ぶ違いがあることもお忘れなく

そして、それぞれ実際に張り付けると次のようになります。

回避可能の実例

youtu.beのアドレスを使って回避させてみました。

純粋なアドレスをyoutu.beへ変換したもの

(https://youtu.be/5fQS6fwFZWc)

リクエストが付いたアドレスをyoutu.beへ変換したもの（２秒後から再生するリクエスト）

(https://youtu.be/5fQS6fwFZWc?t=2)

結果は両方とも埋め込みされました。リクエストがついたものも、YouTubeのサムネ表示に切り替わることが確認できました。

なぜリクエスト付き正規URL(www.youtube.com)になってしまうのか？

youtu.beのリンクは結構簡単に取得できます。たとえばYouTubeの動画を途中で止めて「現時点の動画のURLをコピー」をするとyoutu.beのリンクになります。

また、シェアボタンを押してもyoutu.beのリンクになります。

リクエスト付きURLを取得する背景には、コピーしたURLでアクセスした後で、そのURLをコピーしたりすると、発生してしまう可能性が高そうです。

まとめ：noteにおいては、YouTubeの埋め込みがうまくいかないことがあるけど、youtu.beのアドレスを使うと回避ができる

今回の記事では、noteにおけるYouTubeの埋め込みの張り付け方を記事にしてみました。

YouTubeの埋め込みリンクでわかったことは次の３つです。
①純粋な動画リンクなら埋め込みできる
②リクエストが付いた動画リンクは埋め込みにならない
③youtu.beの短縮アドレスを使うとリクエスト付きでも回避可能

youtu.beを使えばサムネ表示になるようですね。この現象はnoteだけで、他のブログサービスなどは、リクエスト付きのwww.youtube.comのリンクでも埋め込みは可能なようです。

ちなみに、埋め込み不可の動画もあるので、その動画に対しては何しても不可です。動画の提供者が、許可した状態で公開してもらうしかありません。

3行日記：昨日は１日ゆっくりと過ごしました

昨日は月曜なのですが、月頭初っ端を１日ゆっくりと過ごしました。お休みにしたのです。前日が草刈りでしたので。慣れないことした後は休みがよいですね！

さらに、よくあるお疲れ様宴会にも初参加。いろいろな情報が入ってきていいものですね。

多くの方は、次の日仕事だ～と言ってましたが、休めるなら休んだ方が良いかなと思いました。

1年前：特捜部Qを読んでいたようです

特捜部Qという作品を楽しんでいたようです。ハラハラする作品でした。映画もありましたがギャップが大きかったです。（尺の関係でしかたないですね）

関連作品もあり、まだ読めてない、見れてないので、また時間を見つけて読んでいこうと思いました。

また、１年前にも七草みずきさんの記事を引用させてもらったようです。偶然です。ねらってやってないです。本当に。でも、なんかすみません🙇🙇

他にもこんなマガジンもあります。お立ち寄りいただけたら嬉しいです。

心の声です。日々の経験から役立ちそうなことを書いています（単なるつぶやきや日記も含まれます）

素敵な映画や動画をみて得た学びを集めています（単なる感想もあります）

自動車のことが好きで、発見したことを集めています。

最後まで読んでいただきありがとうございます。記事が気に入られましたら、フォローやサポートをいただけると嬉しく思います。また、お気軽なコメントもお待ちしております。

直接ご質問のある方、お仕事のご依頼はこちらまでどうぞ