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 the process has 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 working then stopped embedding altogether. I will circle back if something 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!