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";