YouTubeの動画をサイトに埋め込む時、そのままだとスマホで見切れてしまう件はWeb制作会社にこう頼もう
普通にYouTubeの動画のタグを埋め込むと、PCだと気になりませんが、スマホだと横が見きれます。
タグをまんま入れ込んだ場合:
ね。見切れてますよね?
どうしてこうなるかというと、YouTubeの「共有」から埋め込みコードをコピーして貼り付けされているかと思いますが、この<iframe>には横幅(width)が560px固定で設定されているため、それ以上縮まらないためです。
そのためスマホで見たとき(主に画面幅375px)に、見切れてしまったり、右側に不要な余白が空いてしまったりするのです。
こんな感じですね。
そこで弊社ではこれを回避するために、YoutTube動画を埋め込む際は、「youtube-wrapper」というクラス名をつけた<div>
要素で、<iframe>
を囲むようにしています(後述)。
そうすれば自動的に画面幅に応じて横幅が変動するようになります。
こんな感じです(PCだと見た目は変わりません)。
どうです、スマホで見てもYouTubeの部分が見切れてないですよね?
こんな見え方になっているはずです↓
ちなみにちょっと技術的な事を言うと、これは「youtube-wrapper」という要素に、CSSでレスポンシブに対応させるための指定をしていることが前提です。弊社サイトでは共通CSSにこの指定を追記したので、弊社サイト内では、「youtube-wrapper」要素で囲むだけで自動的に変動する形にしています。
この辺は「普通の人」が自分でやるのはハードルが高いので、ホームページ制作会社に「YouTubeのタグをサイトに貼り付けたとき、スマホで見ても横幅が画面にぴったり収まるようにcssを処理して欲しい」と言えば大丈夫です。
YouTubeの動画をサイトに貼り付けるときは注意してください。