【コピペで使える】YouTube動画埋め込み時にアスペクト比（縦横比）を固定する方法
たーさんスマートフォン対応をしているレスポンシブデザインのウェブサイトにおいて、YouTube動画を綺麗に埋め込むというのは実はなかなか難しかったりします。
通常のYouTube動画の埋め込みタグでは、iframeのwidth・heightに固定の数値が入っていますので、PC画面に合わせればスマートフォン表示で横幅がおさまりきらず、スマートフォン画面に合わせれば表示が小さくなってしまいます。
かといってiframeのwidthを可変の100%指定にしても高さが変わらずに、横長になったり縦長になったりします。
今回はそんなYouTube動画の埋め込みでお悩みの方に、レスポンシブデザインで動画表示領域の縦横比（アスペクト比）を固定するための実装方法について紹介します。
サンプル表示
まずは上記サンプルをブラウザの幅を大きくしたり、小さくしたりしながら表示を確認してみてください。
しっかりとプレイヤーの縦横比が維持されていることがわかるかと思います。
以下にこれを実現するための手順を具体的に解説します。
YouTube動画の縦横比保持の手順
HTML部
<div class="yt-wrapper"><iframe src="https://www.youtube.com/embed/rSFDcx-1p4Y" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0"></iframe></div>
youtube埋め込みタグのwidth・height属性を削除して、iframeをyt-wrapperクラスのdivタグで囲みます。
CSS部
.yt-wrapper {
position: relative;
width: 100%;
}
.yt-wrapper:before {
content:"";
display: block;
padding-top: 56.25%;
}
.yt-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
上記CSSを設定すれば完了です。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
