Responsive Video Embeds with Gutenberg

Quick and easy!

Categories: WordPress

I have been spending some time re-working my starter theme Axe to support Gutenberg, and as part of process have been updating the theme to support Bootstrap 4 as well as a bunch of other cleanup.

After testing some dummy content I noticed that out of the box Gutenberg does not support responsive video embeds.

So here you go!

This should work for YouTube, Vimeo, SoundCloud. Facebook Video was workong then stopped embeding alltogether. I will circle back if sopmething changes.

.wp-block-embed.is-type-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;

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