レスポンシブに役立つCSS(改2)Youtube(iframe)の比率を保つ。
かなり省エネ。これが一番短く済むコードのはずだが、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
この記事が気に入ったらサポートをしてみませんか?