Responsive Video Embeds in WordPress

For many years we’ve used Fitvids.js to keep YouTube and Vimeo video embeds responsive for all screens. It’s still a good option in that it functions as advertised, but if you’re keeping up with the latest in WordPress and Gutenberg, there’s an even simpler way.

Gutenberg Functions

There are a few Gutenberg specific WordPress functions that enable Gutenberg to work as it should, including one for enabling responsive embeds. Add the following code to your theme setup function:

// Responsive embeds
add_theme_support( 'responsive-embeds' );

Once enabled, you should be able to disable Fitvids.js and still have responsive video embeds. If at this point the videos stop being responsive, you may not have the correct styles set up. Here’s a bit of CSS (in Sass form) that should solve the problem:

.is-type-video {

	.wp-block-embed__wrapper {
		display:        block;
		position:       relative;
		width:          100%;
		height:         0;
		padding-bottom: 56.25%; // 16:9 ratio
		margin-top:     1.5rem;

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

See it in action below with this sweet video of my friends and I bouncing our way down Westwater Canyon: