Embed core block: Styles

_embed-admin.scss

/* ------------------------------------------------------------ *\
    Core block: Embed

    Editor styles only
\* ------------------------------------------------------------ */

.wp-block-embed {
    @include wp-block-embed;
}

_embed-mixins.scss

/* ------------------------------------------------------------ *\
    Mixins: Embed (video) core block

    Included in frontend and admin styles.
\* ------------------------------------------------------------ */ 

@mixin wp-block-embed {
    @include blocks-core__margin-vertical__large;

    figcaption {
        @include figcaption;
    }
}

/**
 * Frontend styles.
 *
 * Don't edit here, edit mixins used instead as they are used in the editor too.
 */
@mixin wp-block-embed__frontend {
    & > .wp-block-embed {
        @include wp-block-embed;

        overflow-wrap: break-word;

        // These styles are copied from core admin styles and are needed for embed to look OK on the frontend
        &.wp-has-aspect-ratio {
            .wp-block-embed__wrapper:before {
                content: "";
                display: block;
                padding-top: 50%;
            }

            iframe {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                height: 100%;
                width: 100%;
            }
        }

        &.wp-embed-aspect-21-9 .wp-block-embed__wrapper:before {
            padding-top: 42.85%;
        }

        &.wp-embed-aspect-18-9 .wp-block-embed__wrapper:before {
            padding-top: 50%;
        }

        &.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
            padding-top: 56.25%;
        }

        &.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
            padding-top: 75%;
        }

        &.wp-embed-aspect-1-1 .wp-block-embed__wrapper:before {
            padding-top: 100%;
        }

        &.wp-embed-aspect-9-16 .wp-block-embed__wrapper:before {
            padding-top: 177.77%;
        }

        &.wp-embed-aspect-1-2 .wp-block-embed__wrapper:before {
            padding-top: 200%;
        }

        .wp-block-embed__wrapper {
            position: relative;
        }

    }
}