Responsive Video Embeds with Gutenberg

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