module-object

object

インラインフレームなどの埋め込みオブジェクトを表示する。要素自体ではなく、包括している要素にクラスを付与する。
このクラス単独ではそのままのサイズで表示する。

<div class="object">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Z4CZpUy_YWA?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

object-square

埋め込みオブジェクトを正方形にトリミングして表示する。別途、幅を指定する必要がある。

<div style="max-width: 320px;">

<div class="object object-square">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Z4CZpUy_YWA?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

</div>

object-(ratio-x)to(ratio-y)

埋め込みオブジェクトを指定した縦横比で表示する。別途、幅を指定する必要がある。
(ratio-x)to(ratio-y)は 3to2, 4to3, 16to9, ogimage(1.91:1), 21to9 に対応している。 

<div style="max-width: 320px;">

<div class="object object-3to2 m-b">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Z4CZpUy_YWA?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<div class="object object-4to3 m-b">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Z4CZpUy_YWA?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<div class="object object-16to9 m-b">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Z4CZpUy_YWA?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<div class="object object-ogimage m-b">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Z4CZpUy_YWA?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<div class="object object-21to9 m-b">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Z4CZpUy_YWA?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

</div>