Skip to main content

Embedding content

This provides styles for embedding iframes and other media types.

You would typically use this with the aspect ratio classes or your own aspect ratio styles.

How to import into your CSS​

Import this into your CSS with:

@import 'cacao-css/dist/embed/embed.css';

See Import Cacao CSS for more information.

Example usage​

Here is an example of using this to embed an iframe.

<div class="embed my-5 aspect-16-9">
    <iframe title="Iframe title" frameborder="0" allowfullscreen src="https://domain.com/some-url" loading="lazy"></iframe>
</div>

Source CSS​

embed/embed.css
/* =========================================================================== *\
    Responsive embeds
    You must use this in conjuction with an aspect-ratio class or style.
\* =========================================================================== */

.embed {
    flex-shrink: 0;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.embed iframe,
.embed object,
.embed embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}