WPLake > Learning Hub > ACF oEmbed Field
  • Deutsch
  • Español
  • Français
  • Italiano

ACF oEmbed Field

Effortless embedding: ACF's oEmbed field simplifies content integration, generating embed codes automatically for videos, images, and social media posts.
Embed songs or videos from YouTube

Key Points at a Glance

  1. oEmbed Field in ACF: ACF's oEmbed field type allows easy embedding of third-party content like videos, images, and social media posts into WordPress posts or pages by simply pasting the URL.
  2. Simplified Embedding: With ACF's oEmbed field, you don't need to manually find and paste embed codes, as the field generates the appropriate embed code for the provided URL automatically.
  3. Displaying Embedded Content: Displaying embedded content involves using plugins like Advanced Views, which generate shortcodes for easy embedding into WordPress pages or posts.
  4. Responsive Embeds: Additional CSS styles can be applied to create responsive embeds, ensuring compatibility with different screen sizes and devices.

Table of Contents

About the oEmbed field of ACF

Advanced Custom Fields is one of the best plugins for managing meta fields and Custom Post Types (CPTs). The oEmbed field is one of the ACF field types, which allows you to embed media into your WordPress site.

Designed to work with the built-in oEmbed feature of WordPress, it'll allow you to easily embed third-party content, such as videos, images, social media posts, etc., into your WordPress posts or pages by simply pasting the URL of the content. WordPress automatically recognizes the URL format and fetches the appropriate embed code for the given resource. Think of it as a simpler version of the "Preview loading" feature in social media, on sites like Facebook.com or Linkedin.com. When you write a new post, and paste a link then it'll pull in the image, title and except.

Let's look at what is happening in the background.

Behind the scenes in ACF

The ACF oEmbed field simplifies the process of embedding third-party content within custom fields. It provides a user-friendly interface that allows content editors to enter the URL of the resource they want to embed, and ACF takes care of generating the appropriate embed code for that resource. This eliminates the need for users to manually find, copy and paste the embed codes or the need to worry about the technical details of embedding content and/or media.

When you create an oEmbed field in ACF, you can define the Embed Size. These settings help control the appearance and behavior of the embedded content within your website. But don't be too concerned, feel free to ignore the embed size for now.

ACF oEmbed field setup
Adding an ACF oEmbed field gives an option to define the Embed Size.

Display ACF oEmbed with a shortcode

Now that we know what happens behind the scenes, let's continue with the steps to display embedded content.

We know that when you paste the URL from Twitter or YouTube as an example, into the ACF oEmbed field (while editing a post or page) it returns a string containing the embed HTML obtained by the wp_oembed_get() function. That's great and all, but how do you display that content?

Advanced Views is the answer, which introduces smart templates with automated template generation and built-in post queries.

It's the most user-friendly way to display ACF fields, a method that's easy to maintain, because there isn't much coding involved and one where you won't need to modify your theme either.

Let's dive in.

How-to Step-by-step

If you're planning to follow along, then search for Advanced Views using the built-in Plugin install feature.

Install ACF Views

Step 1. Creating a View

When activating the Advanced Views framework a new item appears in the admin menu, called "Advanced Views". The item has several sub-items, but in our case, we'll be working only with the one called "Advanced Views".

Click that menu item to open the Views page and then click the 'Add New' button to create a View.

On the new page give your View a name, it can be anything that describes the View. I've called my View "video library".

Assigning fields

It’s time to assign the oEmbed field to your View. Click on the ‘Add Field’ button and select your ‘Group’ from the dropdown. In my case, I've called the group “Videos from YouTube”.

Then continue to select the target field from the list. I've selected “Video”.

Assign oembed field in View
Use the dropdown selection to assign ACF oEmbed field.

Click the “Publish” button to save and publish your View. Shortcodes are then generated and shown on the right of the View edit screen. Read more about the different shortcodes and their uses in the Advanced Views docs.

Copy the first shortcode without the object-id parameter to the clipboard.
E.g. [acf_views view-id="456" name="video library"]

Step 2. Paste the shortcode in place

You're almost done.

Go to your target page (the page where you’ve located your ACF fields) then click on the title to edit the page, and paste the copied shortcode anywhere you’d like in the page content.

For Gutenberg editor: click on the plus button in the top bar and choose the "Shortcode" block from the list, then paste your shortcode in the block. If you have Gutenberg as your default editor, you could likely just paste the shortcode, it'll know which block to use.

Now, all that’s left to do is to fill in the field with the video url.

In my case, I have a ‘Video’ oEmbed field and from the default $post$ group the 'Title' and 'Excerpt'.

Rendered output of ACF Oembed

If you don’t see your video thumb with the title and excerpt, then go back and edit the page. For instance, make sure you’ve filled the fields and saved the page, if they are indeed filled, then go further back to your View edit, where you assigned the fields. Then double check they're assigned from the correct field group. Consequently, if you've left the fields unfilled on the page or post then there won't be anything to display.

Display ACF oEmbed with PHP code

As you can see, displaying the embedded content with a shortcode is simple and straight forward, especially when you have a lot of fields to display.

Now, let's look at the other method using PHP code.

The PHP code below can be used to display an oEmbed.

// todo use your field name instead of 'oembed'
$oembedHtml = get_field('oembed') ?: '';

if ($oembedHtml) {
    printf('<div class="embed-container">%s</div>', $oembedHtml);
}

In the code below, we've added extra parameters to the iframe src which gives a little more control over what happens to the video player controls or aspect ratio of the content.

// todo use your field name instead of 'oembed'
$oembedHtml = get_field('oembed') ?: '';

if ($oembedHtml) {
    preg_match('/src="(.+?)"/', $oembedHtml, $matches);
    $src = $matches[1] ?? '';

    $params = [
        // todo use your arguments here
        'controls' => 0,
        'hd' => 1,
        'autohide' => 1
    ];
    $newStr = add_query_arg($params, $src);
    $oembedHtml = str_replace($src, $newStr, $oembedHtml);

    printf('<div class="embed-container">%s</div>', $oembedHtml);
}

Note, in this code example we've only shown how to display a single oEmbed field. If you have more fields, then you'd need to write the relevant code to display it.

To get additional information, watch the video below and read the official ACF article.

ACF oembed field with code, video cover

Responsive embeds

With some additional CSS styles, you can now create responsive embeds.

Note: Each provider like Vimeo, Dailymotion, Google Maps or YouTube, may need different CSS styles. Therefore it's best to create styles for each specific case.

Rich-content embeds
Embed media for rich-content.

Final thoughts

In this tutorial, we’ve shown you how to use and display ACF oEmbed fields in two ways, first with a simple shortcode and then with some PHP code. The shortcode method is of course much easier, requires no coding and removes the hassle of maintaining the PHP code in future.

Note, that a View can contain any number of fields of different types, which means you could extend your View at any time, Advanced Views supports all available field types with extended settings for complex field types, like ACF Repeater.

For more info about the plugin we used in our shortcode example, visit the official plugin page.

Now go embed some media!

Was this article helpful?

Totally useless

Slightly helpful

Very helpful

FAQ mode

/

Learning mode

  1. How does the oEmbed field work in ACF?

    The oEmbed field allows users to embed content by pasting the URL, with ACF automatically generating the appropriate embed code for the resource.

  2. Can I customize the size of embedded content with ACF oEmbed fields?

    Yes, ACF oEmbed fields offer options to define the embed size, providing control over how embedded content appears on the website.

  3. How can I create responsive embeds for different media providers?

    Responsive embeds can be created with additional CSS styles tailored to specific media providers like Vimeo, Dailymotion, Google Maps, or YouTube.

  4. What is the shortcode method for displaying embedded content?

    The shortcode method, facilitated by plugins like Advanced Views, allows users to easily display ACF oEmbed fields on WordPress pages or posts using simple shortcodes without extensive coding.

Related articles

Content links (12)

About the Author

Baxter Jones

With over 15 years of experience in the web industry, I specialize in design, user experience, and web best practices. I have a keen eye for detail and thrive on following a structured process in my work. I’m passionate about WordPress, considering it the best innovation since sliced bread. When I’m not at my computer, you’ll find me enjoying time in the garden.

2 Comments

Thomas C
-
25.03.2024
Hi, Good stuff here, very useful thanks! How would you output a Oembed as a link, use case, I'd want to embed my video on a single page template, then just under the embedded content, having a link "view in Youtube". Any suggestions to achieve this?
Reply
Baxter Jones
-
26.03.2024
Admin
Hi Thomas, thank you for your kinds words.
1. The video contains the "Watch on YouTube" link in the bottom left corner by default.
2. By default, ACF returns the iframe markup on get_field call. However, if you pass the third argument (which is responsible for formatting) as false, it will return the raw value, in our case, the link itself. So, you can have two calls in your template: `get_field('name', 1)` and `get_field('name', 1, false)`, and then place them into the appropriate locations.
Reply

    Leave a comment

    Reply to 

    Please be considerate when leaving a comment.

    Not shown publicly

    Got it