InstagramのリールとYouTubeショートを、noteに埋め込む方法
今日は、クラゲしか釣れない日でした
しかし、勉強になりました
水族館で見たときは
水中で脚が広がってたけど
こうやって空気中に上げると
表面張力で、1本のようにまとまるのですね
手袋がなくて終わったわ
毒デバフが怖くてさわれない
せっかくなので
観察して動画に撮りました
それがちょうど
ショート動画の長さになったので
noteに埋め込む実験をしてみます
まずInstagramのリール
スマホアプリで
URLをクリップボードに入れました
https://www.instagram.com/reel/Cw177gbyt3z/?igshid=MzRlODBiNWFlZA==これをそのまま
noteの本文エディット欄にペーストし
改行すると……
こうなりました
これは期待した動作ではありません
期待した動作は
下の画像のように
サムネイルがもっと縦長く、でかく表示されること
Instagramの写真だったら、こうなるのに
動画（リール）だったら、こうならない
これはnote側の実装が
最新に追いつけてないのでしょう
上のURLのうち
https://www.instagram.com/reel/Cw177gbyt3z/?igshid=MzRlODBiNWFlZA==後半の ? 以下はクエリに過ぎないので
この動画を表す純粋なURLは
https://www.instagram.com/reel/Cw177gbyt3z/です
最後の / は、あってもなくてもイイ
これをnoteにペーストした結果は
特に変わりませんでした。
くそがー（ろくでなしBLUES風）
ちなみに、上で理想通りに表示できた画像のURLは
https://www.instagram.com/reel/hogeの形式でなく
https://www.instagram.com/p/hogeの形式です
なので、リールのURLである
https://www.instagram.com/reel/Cw177gbyt3z/の reel だけを p に置換した
https://www.instagram.com/p/Cw177gbyt3z/というURLをペーストしたところ
あっさり上手く行きました
クリックすると
このまま画面遷移なしで再生されます
カンペキ！
次にYouTubeショート
URLは
https://youtube.com/shorts/a15Qi4waKRMでした
これをnoteにペーストすると……
ダメな版のリールとそっくりじゃん
くそがー2
でも、これも解決できた
まず、YouTube上で動画を再生しながら
右クリックメニューで
動画のURLをコピー
現時点の動画のURLをコピー
埋め込みコードをコピー
を選べるのだけど
これらを使う方法は全滅っ……
どうダメかというと
「動画のURLをコピー」の場合
https://www.youtube.com/shorts/a15Qi4waKRM?feature=shareがクリップボードに入ります
www というサブドメインが増えてる以外に、大した違いはなく
この違いにも意味はないので、YouTubeの実装に不統一があるだけです
「現時点の動画のURLをコピー」だと
再生位置を指定する t パラメータが増えるだけ
「埋め込みコードをコピー」では
<iframe width="320" height="560" src="https://www.youtube.com/embed/a15Qi4waKRM" title="クラゲのぴくぴく" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>が手に入るけど、noteは iframe タグの埋め込みを許可してないので意味ない
（すっごい初期の頃は許可してたっぽい？）
この src アトリビュートに指定されてる
https://www.youtube.com/embed/a15Qi4waKRMをnoteにペーストしてみると
となってしまい、むしろ悪化してるッ
そこで調べたのは
ショートでないYouTube動画と、ショート動画のURLの違い
これはショートでない動画だけど
ちゃんと埋め込めてる
この動画のURLは
https://www.youtube.com/watch?v=6AUVr7zqISAなので、埋め込みたいショート動画のURLである
https://youtube.com/shorts/a15Qi4waKRMのID部分に置き換えて
https://www.youtube.com/watch?v=a15Qi4waKRMというURLを作った
これをブラウザのURL欄にペーストすると
ショート動画が、YouTubeのショート動画用レイアウトでなく
普通の動画用レイアウトで再生された
というわけで、この
https://www.youtube.com/watch?v=a15Qi4waKRMをnoteにペーストすれば
noteでも
普通のYouTube動画と認識されて、埋め込めました
結局、まとめると
リールも、YouTubeショートも
ショート動画というものは
リールの場合は、静止画のURLっぽくすると
静止画のフリをしてnoteに埋め込むことができ
YouTubeの場合は、ショートでない動画のURLっぽくすると
ショートでないフリをしてnoteに埋め込むことができる
って法則があったワケです
どっちもnoteに埋め込めば
不便はないので
好きなほうにアップロードすればイイ
ただ、私の場合
リールのほうが、YouTubeショートの何倍も再生数が多い
個人に向いてるのは
TikTok > リール > YouTubeショート
という話を聞いたことあるけど、ホントっぽい
YouTubeショートは
アップロード時も、アップロード後も
動画の色調を編集できないし
見る立場でなく
作る立場になると、魅力がわかんない……
なので、この動画は
スマホで編集後に、それぞれにアップロードした
の順です
24fpsのキタノブルー好きィィイイ
オマケとして
noteに直接、動画をアップロードできるかも
試してみました
編集画面で、現在行の左に表示される + ボタンを押して
「画像」を選択すると、ファイル選択ダイアログが表示されます
デフォルトでは画像ファイルの拡張子しか選べないので
「すべてのファイル」に変更すると
mp4とかも選択可能になるので、それを指定すると
アップロードが開始され
埋め込み予定位置に ・・・ がアニメーションします
その結果は、以下です
ダウンロード用のファイルとして
認識されちゃったみたい……
せっかくなので
このまま残しておきます
クラゲの命を使い切りたい……
感謝するぜ
お前と出会えた、これまでの全てに！
Instagram、YouTube以外の
noteへの埋め込みについては、以下の記事に書きました