SNSのサムネイルサイズ覚書です。
SNSのサムネイルサイズ一覧(note,Youtube,X)
- 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画像投稿サイズ早見表】
— リナ▶︎ 動画編集×図解 (@rina_mov) July 26, 2021
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
なぜ、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タグなどで囲ってはいけません。それだとアドレスの文字列が表示されてしまいます)
何度もやる行動は、時間がもったないため、できるだけ簡単な方法を最初に探しましょう。
コメント