v7.1.0

iframe

Table of Contents

Detail

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

Basic

.iframe で iframe をラップすることで、レスポンシブなアスペクト比維持を行えます。

Aspect
<div class="iframe is-aspect-16x9">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/llQkSr6fzXg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
SelectorDescription
.iframeiframe をラップしてアスペクト比を指定するセレクター。
iframe実際に動作する iframe。
Warning

.iframe には .is-aspect-16x9 .is-aspect-4x3 どちらかの付与が必須です。

ModifierDescription
.is-aspect-16x9.iframe に付与するとアスペクト比が 16:9 になります。
.is-aspect-4x3.iframe に付与するとアスペクト比が 4:3 になります。

Variables

Name
Default Value
  • Name
    $selector-iframe
    Default Value
    .iframe
  • Name
    $selector-iframe-core
    Default Value
    iframe
  • Name
    $modifier-iframe-aspect-16x9
    Default Value
    .is-aspect-16x9
  • Name
    $modifier-iframe-aspect-4x3
    Default Value
    .is-aspect-4x3

Mixins

  • musubii-style-iframe()
  • musubii-style-iframe-core()
  • musubii-style-iframe-wrap-aspect-16x9()
  • musubii-style-iframe-wrap-aspect-4x3()

Sources