Responsive Video Embeds with Gutenberg

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%;
    }
}
Adam Patterson

Adam Patterson

User Interface Designer & Developer with a background in UX. I have spent 5 years as a professionally certified bicycle mechanic and ride year-round.

I am a husband and father of two, I enjoy photography, music, movies, coffee, and good food.

You can find me on Twitter, Instagram, and YouTube!