クリエイター:コーディング備忘録ブログ

コーディング

Youtubeの埋め込みをレスポンシブ対応

レスポンシブに対応しているサイトで、youtubeの動画を埋め込む際、
スマートフォン用の表示なったときに、動画の画面表示比率を維持したまま縮小させる方法です。

padding-bottom: 56.25%; は
高さの比率 ÷ 幅の比率 × 100でアスペクト比を算出することが可能です。

今回は16:9の比率なのでpadding-bottom: 56.25%; に設定しています。

コメント

この記事へのコメントはありません。

RELATED

PAGE TOP