echo-embed
インラインフレームなどの埋め込みオブジェクトを表示する。要素自体ではなく、包括している要素にクラスを付与する。
このクラス単独ではそのままのサイズで表示する。
<div class="echo-embed"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Z4CZpUy_YWA?rel=0" frameborder="0" allowfullscreen></iframe> </div>
sub class echo-embed-(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="echo-embed echo-embed-3to2" style="margin-bottom: 1rem;"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Z4CZpUy_YWA?rel=0" frameborder="0" allowfullscreen></iframe> </div> <div class="echo-embed echo-embed-4to3" style="margin-bottom: 1rem;"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Z4CZpUy_YWA?rel=0" frameborder="0" allowfullscreen></iframe> </div> <div class="echo-embed echo-embed-16to9" style="margin-bottom: 1rem;"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Z4CZpUy_YWA?rel=0" frameborder="0" allowfullscreen></iframe> </div> <div class="echo-embed echo-embed-ogimage" style="margin-bottom: 1rem;"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Z4CZpUy_YWA?rel=0" frameborder="0" allowfullscreen></iframe> </div> <div class="echo-embed echo-embed-21to9" style="margin-bottom: 1rem;"> <iframe width="560" height="315" src="https://www.youtube.com/embed/Z4CZpUy_YWA?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div>