YogeshChauhan . com

How to embed YouTube or other video links in WordPress?

in WordPress on March 3, 2021

Advanced Custom Fields is a great plugin to make your website a feature rich website.

We saw a few different examples to get values from ACF like How to get ACF values from custom post type?How to loop through a repeater field in ACF? and How to get ACF field values from another post?

Let’s continue to explore the wonderful ACF more…

NOTE: To use the solution below you must have the ACF pro plugin. The free plugin doesn’t have this feature available.

ACF has oEmbed field that provides an interactive element to embed tweets, videos, audio, images, and other content. It uses the WordPress oEmbed functionality to do so.

Here’s what the oEmbed field settings looks like:

List of field settings shown when setting up a oEmbed field

Here’s what the oEmbed field interface looks like:

An oEmbed field with an example video from Vimeo in use

As you can see in the screen capture above, we can add Vimeo links, YouTube links and other video links.

While adding the video link, my rule of thumb is that if the link shows preview then it should definitely work on your website. If it doesn’t then make sure the link is correct.

The field will return a string that has the embed HTML. The HTML contents is obtained by the wp_oembed_get() function.

How to display oEmbed ACF value?

<div class="embed-container">
    <?php the_field('oembed'); ?>

How to display ACF value with additional attributes?

We can also add additional attributes to the iframe src and HTML in the embedded video.


// Load value.
$iframe = get_field('oembed');

// Use preg_match to find iframe src.
preg_match('/src="(.+?)"/', $iframe, $matches);
$src = $matches[1];

// Add extra parameters to src and replcae HTML.
$params = array(
    'controls'  => 0,
    'hd'        => 1,
    'autohide'  => 1
$new_src = add_query_arg($params, $src);
$iframe = str_replace($src, $new_src, $iframe);

// Add extra attributes to iframe HTML.
$attributes = 'frameborder="0"';
$iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe);

// Display customized HTML.
echo $iframe;

How to make the embedded video responsive?

To make it responsive, add the value in a container like this:

<div class="embed-container">
    <?php the_field('oembed'); ?>

Now, add the style to make it responsive:

.embed-container {
  position      : relative;
  padding-bottom: 56.25%;
  overflow      : hidden;
  max-width     : 100%;
  height        : auto;

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top     : 0;
  left    : 0;
  width   : 100%;
  height  : 100%;

Credit goes to: ACF Docs


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

The :last-of-type selectorCSSLearn how to use Self JOIN in SQL and MySQLSQL/MySQLHow to create a simple slider with CSS and jQuery?CSSHow does AdSense calculate page loading time?JavaScriptHow to create a for loop in SCSS (Sass)?SCSSHow to make HTML form interactive and using CSS?CSS