iframe

iframe を制御するエレメント CSS。

Table of Contents

Basic

  • .iframe で iframe を囲うことで制御します
  • 縦横比を Aspect で指定できます
  • .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";