動画をホームページに埋め込むことはよくあると思います。そんな時、パソコンで見たり、スマートフォンで見たりして、ブラウザの横幅が変化しても、動画の上下に黒い余白ができないようにするためのCSSをご紹介します。動画を埋め込んでみます。埋め込みコードはこのようになっています。allowfullscreen></iframe>表示領域の横幅が、Youtube動画の横幅と同じか、それよりも大きい場合は、問題なく表示されます。ところが、ブラウザの横幅を縮めて、表示領域の横幅が、Youtube動画の横幅よりも小さくなると、動画の上下に黒い余白ができてしまいます。高さを439ピクセルと指定したので、これを維持しているのですね。これは、美しくないですよね。動画埋め込み用のCSSを書いて、美しく表示させましょう。padding-bottomが、56.25%になっているところがポイントです。56.25%は、動画の縦横比を表しています。・・・・つまり、56.25%です。このクラスで、先ほどの埋め込みコードを囲みます。allowfullscreen></iframe></div>このようにすれば、パソコンで見ても、スマートフォンで見ても、動画は上下の黒い余白がなく美しく表示されるようになります。最近は、レスポンシブ対応のホームページが主流になりつつあります。CSSで、機種に依存しないサイト作りを心掛けたいものですね。「ホームページの価値は使う人次第」コメントをどうぞ返信をキャンセルする。新しい投稿をメールで受け取る\無料/ご依頼・ご相談はこちらパソコン・インターネットでお困りなことや分からないことなどお気軽にお問い合わせください。※メールでのお問い合わせは無料で受け付けています。•••etcお見積もり依頼も大歓迎です!お問合せはこちら最近のブログ記事さすがAnker!コンパクトでパワフルなモバイルバッテリーPapierでChromeの新規ページをメモ帳にして有効活用WEBページからカラーコードを取得するChrome拡張機能WEBページを画像にしてくれるChrome拡張機能WEBサイトのパフォーマンスを改善するためのChrome拡張機能ブログやSNSで使う写真を撮る時のちょっとしたポイント那須川天心というキックボクサーの動きをスローにして見た時間を投資するか、時間を浪費するか。