iframe
iframe を制御するエレメント CSS。
Table of Contents
Basic
.iframe
でiframe
を囲うことで制御します.is-aspect-{ratio}
で縦横比を固定できます{ratio}
は16x9
または4x3
の 2 種類.is-cover
でiframe
は親要素いっぱいのサイズになります
<div class="iframe is-aspect-16x9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/llQkSr6fzXg" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen>
</div>
<div class="iframe is-aspect-4x3">
<iframe width="560" height="315" src="https://www.youtube.com/embed/llQkSr6fzXg" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen>
</div>
<div class="iframe is-cover" style="height: 400px;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/llQkSr6fzXg" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen>
</div>
Variables
上書きできる変数は以下の通りです。
/* None */
Import
PostCSS で読み込む場合の各パスは以下となります。
@import "musubii/src/elements/iframe/main.css";