SNSのサムネイル画像サイズの比率/X(Twitter) /note他

SNSのサムネイルサイズ覚書です。

SNSのサムネイル画像サイズの比率/X(Twitter) /note/Youtube他

• note:1280 × 670 px
• YouTube:1280×720(16:9)
• X(Twitter) 4枚の横長の場合は16:9

YouTUBE用のサムネイルをnoteにのせるときは上下きれることを想定した方がよさそうです。

1280 × 670 px

https://www.help-note.com/hc/ja/articles/360000231642-%E7%99%BB%E9%8C%B2%E7%94%BB%E5%83%8F%E3%81%AE%E6%8E%A8%E5%A5%A8%E3%82%B5%E3%82%A4%E3%82%BA%E4%B8%80%E8%A6%A7

X(Twitter) の画像サイズ

【Twitter画像投稿サイズ早見表】

2枚組 (8:9)
横 1200px × 縦 1350px を2枚

3枚組 (8:9)(16:9)
横 1200px × 縦 1350px を1枚
横 1280px × 縦 720px を2枚

4枚組 (16:9)
横 1280px × 縦 720px を4枚

このサイズにするとピッタリ綺麗に画像が収まりますよ！！！#動画編集者と繋がりたい pic.twitter.com/HFjomYNlra

— リナ▶︎ 動画編集×図解 (@rina_mov) July 26, 2021

なぜ、8:9なのかといえば、8*2=16だからです。2枚足すと16:9になります。

3枚の右側の画像を考えた場合も16:18(9*2)を割る2すると8:9になります。

3:4という情報もあってやや混乱しましたが、現在はこの説明がわかりやすいかなという気がしています。

Youtubeのサムネイルサイズ

解像度: 1280×720

https://support.google.com/youtube/answer/72431?hl=ja#zippy=%2C%E7%94%BB%E5%83%8F%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%A8%E8%A7%A3%E5%83%8F%E5%BA%A6

つまり、16:9を80倍します。

Youtubeのスマホのアスペクト比率

パソコン上での YouTube の標準アスペクト比は 16:9 です。

https://support.google.com/youtube/answer/6375112?hl=ja&co=GENIE.Platform%3DDesktop#:~:text=%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3%E4%B8%8A%E3%81%A7%E3%81%AE%20YouTube,%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82

スマホ(iPhone)やAndroidはいろいろなサイズがあるけど調整してくれるので作る方は、このアスペクト比率を覚えておけば問題なさそうです。

１番簡単なスマホで動画(youtube)がはみだすのを回避する方法

divじゃなくiframe

Youtubeのスマホ(iphoneやandroid)やレスポンシブデザインの対応です。

<div class="video-container">
<iframe width="550" height="400" src="#" frameborder="0"></iframe>
</div>

なんて、紹介しているサイトがなぜか多いけど、divなしで

/* 動画のはみ出し回避 */
iframe {
  max-width: 100%;
}

でいいんじゃないでしょうか。

youtubeのタグにあるiframeに直接幅マックスを指定するわけですね。
もちろん、iframeを他で使う場合、ちょっと検討が必要ですけどね。個人的には問題なしです。
divをかます理由がいまいち…わからず。

Advanced Responsive Video Embedderというプラグインで回避する必要もないんじゃないかと。
WordPress › Advanced Responsive Video Embedder « WordPress Plugins

直接アドレスを貼り付けることにより簡単に!

そして、Wordpressならyoutubeのアドセスそのまま貼り付けるだけで動画を公開できます
(注意事項としてはpタグなどで囲ってはいけません。それだとアドレスの文字列が表示されてしまいます)

何度もやる行動は、時間がもったないため、できるだけ簡単な方法を最初に探しましょう。