Media

Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.

About

Rules are directly applied to <iframe>, <embed>, <video>, and <p> elements; optionally use an explicit descendant class .embed--responsive--item when you want to match the styling for other attributes.

Pro-Tip! You don’t need to include frameborder="0" in your <iframe>s as we override that for you.

Wrap any embed like an <iframe> in a parent element with .embed--responsive and an aspect ratio. The .embed--responsive--item isn’t strictly required, but we encourage it.

How to import media styles:

In order to use medias in your project, import following path in your main styles:

@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/media
How to customize media styles:

In order to customize medias in your theme as per requirements, import following path in your theme-settings file:

@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/media

Example 21 : 9

Example 16 : 9

Example 4 : 3

Example 3 : 2

Example 1 : 1

Example 21 : 9

Example 16 : 9

Example 4 : 3

Example 3 : 2

Example 1 : 1

<div class="embed--responsive embed--responsive--21by9">
    <iframe class="embed--responsive--item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
<div class="embed--responsive embed--responsive--16by9">
    <iframe class="embed--responsive--item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
<div class="embed--responsive embed--responsive--4by3">
    <iframe class="embed--responsive--item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
<div class="embed--responsive embed--responsive--3by2">
    <iframe class="embed--responsive--item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
<div class="embed--responsive embed--responsive--1by1">
    <iframe class="embed--responsive--item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>


<div class="embed--responsive embed--responsive--21by9">
    <figure class="embed--responsive--item" style="background-image: url(../../images/img-01.png);"></figure>
</div>
<div class="embed--responsive embed--responsive--16by9">
    <figure class="embed--responsive--item" style="background-image: url(../../images/img-01.png);"></figure>
</div>
<div class="embed--responsive embed--responsive--4by3">
    <figure class="embed--responsive--item" style="background-image: url(../../images/img-01.png);"></figure>
</div>
<div class="embed--responsive embed--responsive--3by2">
    <figure class="embed--responsive--item" style="background-image: url(../../images/img-01.png);"></figure>
</div>
<div class="embed--responsive embed--responsive--1by1">
    <figure class="embed--responsive--item" style="background-image: url(../../images/img-01.png);"></figure>
</div>