> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/field-types/media/oembed-field.md).

# 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](/advanced-views/fields/meta-plugins/advanced-custom-fields.md): any oEmbed field
2. [MetaBox](/advanced-views/fields/meta-plugins/meta-box-fields.md): any oEmbed field
3. [Pods](/advanced-views/fields/meta-plugins/pods-fields.md): any oEmbed field

## 1. How to display an oEmbed field

1. [Create a new *Layout*](/advanced-views/getting-started/first-layout.md)
2. Add any oEmbed field
3. Save the *Layout*, copy its [embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
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](/advanced-views/layouts/code-fields/custom-template.md) to use the render options:

## 2. Render options for oEmbed field

### 2.1) Adding class to the iframe

&#x20;Since oembed contains the ready iframe tag, you can add a class attribute using the replace [Twig filter](/advanced-views/features/smart-templates/twig-templates.md#filters), as shown below:

```twig
{% 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:

```twig
{{ 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](https://developer.wordpress.org/reference/functions/wp_oembed_get/).

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.

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

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

```twig
<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.

{% hint style="info" %}
Note: for the first case, you should use the ['raw' Twig filter](https://docs.advanced-views.com/templates/twig-templates#auto-escaping), otherwise the iframe's markup will be escaped.
{% endhint %}