Youtubeのスマホのアスペクト比とサムネイルサイズ

WordPress

Youtubeの仕様などに関する覚書です。

PR記事:新TwitterAPI v2に対応!?Twitter予約投稿ツール比較

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のサムネイルサイズ

解像度: 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)がはみだすのを回避する方法

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タグなどで囲ってはいけません。それだとアドレスの文字列が表示されてしまいます)

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

コメント