Adds responsive embedding to WordPress oEmbed content.

README.md

Responsive Embeds in WordPress

This snippet filters oEmbed output in WordPress (the_content()) to force responsive embeds.

Usage

To use, add the contents of responseive_embeds.less to your site's stylesheet (if you're not using LESS, don't forget to move the iframe,object,embed rule outside of .embed-container and change it to .embed-container iframe,.embed-container object,.embed-container embed).

Then add the responsive_embed() function to your theme's functions.php and insert the add_filter() call in your theme's setup function.

NOTE: If your theme is not a child theme, this can be placed directly below responsive_embed(), outside of any function.

functions.php

<?php

function setup_theme(  ) {
    // Theme setup code...
    
    // Filters the oEmbed process to run the responsive_embed() function
    add_filter('embed_oembed_html', 'responsive_embed', 10, 3);
}
add_action('after_setup_theme', 'setup_theme');

/**
 * Adds a responsive embed wrapper around oEmbed content
 * @param  string $html The oEmbed markup
 * @param  string $url  The URL being embedded
 * @param  array  $attr An array of attributes
 * @return string       Updated embed markup
 */
function responsive_embed($html, $url, $attr) {
    return $html!=='' ? '<div class="embed-container">'.$html.'</div>' : '';
}

responsive_embeds.less

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;

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

No longer works here

This works. In this case I'm adding an additional class if the embed type is a video.

/**
 * Add wrapper to oEmbed content
 */
add_filter('oembed_dataparse', 'wrap_oembed_dataparse', 99, 4);
function wrap_oembed_dataparse($return, $data, $url) {
    $mod = '';
 
    if(($data->type == 'video')) {
        $mod = 'embed-responsive--video';
    }
    return '<div class="embed-responsive ' . $mod . '">' . $return . '</div>';
}

To use ‘oembed_dataparse’ for the first time, you might have to clear oEmbed post-meta cache using the code below. After the cache has been cleared, you should remove the code.

/**
 * Clear oEmbed post-meta cache
 */
add_filter('oembed_ttl', function($ttl) {
	$GLOBALS['wp_embed']->usecache = 0;
	$ttl = 0;
	do_action('wpse_do_cleanup');
	return $ttl;
});

add_filter('embed_oembed_discover', function($discover){
	if(1 === did_action('wpse_do_cleanup'))
		$GLOBALS['wp_embed']->usecache = 1;
		return $discover;
});

Source: https://developer.wordpress.org/reference/hooks/oembed_dataparse/

/**
 * Enable responsive embed support.
 * @link https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#responsive-embedded-content
 */
add_theme_support('responsive-embeds');