Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.
Utils are now deprecated!
Utils have been removed from the fluid-design-system library in v5.0.0.
If you want to keep using them, install the
@engie-group/fluid-4-deprecated
package and import them.
About
Rules are directly applied to <iframe>, <embed>, <video>, and <object> 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.
Example
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.
Aspect ratios
Aspect ratios can be customized with modifier classes.