Displaying oEmbed field

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

Advanced Views natively supports the following oEmbed types:

1. ACF: any oEmbed field

2. MetaBox: any oEmbed field

3. Pods: any oEmbed field

1. How to display an oEmbed field

1. Create a new Layout

2. Add any oEmbed field

3. Save the Layout, copy its embedding shortcode

4. Embed Layout: paste the shortcode inside the target place

By default, oEmbed is displayed using an <iframe> tag. You can customize the Layout template to use the render options:

2. Render options for oEmbed field

2.1) 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 %}

2.2) 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 }}

2.3) Displaying as a link

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.