1行でサイト内動画の最大幅を指定する方法

1行でサイト内動画の最大幅を指定する方法

サイト内に動画を表示することが増えてきていますね。
この記事はエンジニアではない方が簡単に動画の最大幅を指定する方法を解説します。

今回は下記記事の内容が完了していることを前提で解説していきます。
・YouTube動画をWEBサイトに埋め込む
・1分でYouTube動画サイズを調整する方法

■前提
・サイト内にYouTube動画を埋め込めている
・埋め込みコード内のHTMLが「width=”100%”」になっている

それでは解説していきます。
と言っても、前提から一行加えるだけで完了できるのでとても簡単です。

width=”100%” height=”315″ src=”https:省略” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen>

このような状態になっていると思います。
このコードに「max-width=”任意の最大px数”」を記述します。

例えば、PCで見た時に1000px以上にしたくないという場合は、
「max-width=”1000px”」と記述します。

記述する場所は、「width=”100%″ height=”315″」の間です。
完成形は「width=”100%″ max-width=”1000px” height=”315″」となります。

注意点は「max-width=”1000px”」の両サイドに半角スペースをしっかり入れることです。
スペースがない場合、表示がおかしくなる可能性があるので確認してください。

作業はこれで終わりです！

慣れていな方は、どういう内容なの？と感じると思うので内容を解説します。

・width=”100%”
画面幅いっぱいに表示するという指示です。

・max-width=”1000px”
表示サイズは1000px以上大きくしないという指示です。

つまり、「SPもPCも基本的には画面いっぱいで表示するけど、1000px以上の画面幅になった場合は動画サイズは1000pxまでにしてね！」という指示になります。

サンプルとしてSP、1000pxの画面幅、1500pxの画面幅の3パターンの画像を貼り付けるので、参考にしてみてください。