1分でYouTube動画サイズを調整する方法
1分でYouTube動画サイズを調整する方法
以前YouTube動画の埋め込み方法について解説しましたが、今回はパソコン(PC)とスマホ(SP)で表示サイズを変更する方法を解説していきます。
埋め込み方法についてはこちら
まず用語の解説ですが、PCとSPでサイズを変更したり、レイアウト(デザイン)を変更することをレスポンシブを言います。
解説を始める前に「なぜレスポンシブが必要なのか」を説明します。
基本的にPCはモニターが横長で画面が大きく、SPは縦長で画面が小さいです。
サイズも縦横比も異なる画面で同じレイアウトのままだとどうなるでしょうか。
PCを基準にレイアウトを作ったレイアウトをSPでそのまま表示させるとこのようになります。
※PC表示
※SP表示
PCでは全体的に整っていますが、SPで見ると文字も大きく、各ブロックが極端に縦長で冗談でもキレイとは言えないですよね。
ではSPだけレイアウトを調整してみます。
どうでしょうか。
文字サイズも全体のレイアウトも整って見やすくなりました。
このように、WEBサイトを制作する上でさまざまな画面サイズに対応させることは必須です。
この内容を踏まえて、YouTube動画のサイズを変更していきましょう。
動画は以前と同じ動画を使用します。
埋め込みする時は幾つか工程がありましたが、今回は1箇所修正するだけで終わります。
(ホントです！！)
HTML(コード)はこのような感じになっていると思います。
width=”560″ height=”315″ src=”https:省略” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen>
上記コードの最初の部分「width=”560″」の560を「100%」に変更します。
変更後は「width=”100%″」になります。
変更後のSP画面を見てみましょう。
しっかり画面サイズに収納されています。
これで作業は完了です。
是非ご参考にしてください！
「SPでは表示がうまくできたけど、今度はPCの表示がデカすぎる」という方は下記の記事を参考にしてください。
