oEmbed

The oEmbed field type (e.g. ACF oEmbed field) provides an interactive component for embedding videos, images, tweets, audio, and other content. This field makes use of the native WordPress oEmbed functionality.

How to use it

Select the oEmbed field from your field group.

Adding class to the iframe

Since oembed contains the ready iframe tag, you can add a class attribute using the replace Twig filter, as shown below:

{% if oembed.value %}
  <div>
    {{ oembed.value|replace('<iframe ','<iframe class="my-class" ')|raw }}
  </div>
{% endif %}

Enabling video autoplay

If you've embedded a video, you can enable autoplay so it starts as soon as readers open the page, without needing to click. To do this, add the autoplay argument to the iframe's src URL. The argument name may vary depending on the platform, but for YouTube, it's autoplay=1.

It can be done use the replace Twig filter, as shown below:

{{ oembed.value|replace({'" frameborder':'&autoplay=1" frameborder'})|raw }}

Displaying "raw" value

By default, the Meta vendors turn the oEmbed field value into an iframe element automatically using the built-in WP feature.

In some cases, you may need to get the raw value, the origin link itself to display alone, not turned into oembed and wrapper into iframe.

In this case, you can use the 'raw_value' property.

<a href="{{ my_oembed.raw_value }}">Watch video</a>

You're free to mix both at the same time, so you can have:

<div>{{ my_oembed.value|raw }}</div>
<a href="{{ my_oembed.raw_value }}">Watch video</a>

When the first will display the iframe itself, and the second will display the watch link.

Note: for the first case, you should use the 'raw' Twig filter, otherwise the iframe's markup will be escaped.