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

Are you still using this code? I do not understand why but has stopped working for me...

Still works here...

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');