# Responsive Video Embeds From ACF oEmbed Fields

> Wraps the output of ACF oEmbed fields in a 16:9 container and adds lazy loading, so embedded videos scale to the screen instead of overflowing on phones.

- Type: PHP
- Runs: Frontend only
- Category: [Custom Post Types & Fields](https://wpide.com/library/category/post-types/)
- Tags: acf, video, responsive
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/acf-responsive-oembed/

## Code

```php
// Aspect ratio of the container.
$wpide_acf_embed_ratio = '16 / 9';

add_filter( 'acf/format_value/type=oembed', function ( $value ) use ( $wpide_acf_embed_ratio ) {
    if ( ! is_string( $value ) || false === strpos( $value, '<iframe' ) ) {
        return $value;
    }

    $value = preg_replace( '/<iframe(?![^>]*\sloading=)/', '<iframe loading="lazy"', $value );
    $value = preg_replace( '/\s(width|height)="\d+"/', '', $value );

    return '<div class="acf-embed" style="aspect-ratio:' . esc_attr( $wpide_acf_embed_ratio ) . ';width:100%">' . str_replace( '<iframe', '<iframe style="width:100%;height:100%;border:0"', $value ) . '</div>';
} );
```

## Notes

Change the aspect ratio for vertical or square videos.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Responsive Video Embeds From ACF oEmbed Fields" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/