レスポンシブに役立つCSS（改2）Youtube（iframe）の比率を保つ。

Dal Bianco Inc.／ディレクター・Gデザイナー・Webデザイナー・コーダー・アドバイザー

2021年4月30日 12:27

かなり省エネ。これが一番短く済むコードのはずだが、calcに対応し出したのが2013年頃？未だ生きてる可能性あり。ビミョー。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CodingSample／Youtubeレスポンシブ</title>

<style type="text/css">
   
   iframe {
       width: calc(100vw * 0.5)!important; /*親要素の幅に合わせて乗算*/
       height: calc(56.25vw * 0.5)!important; /*親要素の幅に合わせて乗算*/
       /*!importantはこちらが優先ということ*/
   }
   
</style>

</head>

<body>

<iframe width="560" height="315" src="https://www.youtube.com/embed/Qp3b-RXtz4w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
   
</body>
</html>

よろしければ「スキ」をお願いしますm（_ _）m

この記事が気に入ったらサポートをしてみませんか？