Yogesh Chauhan's Blog

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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Some EASY-to-Understand CSS media query examplesCSSHow to set opacity or transparency using CSS?CSSUPDATE and DELETE Statements in PostgresPostgresFor In Loop in Swift for BeginnersSwiftHow to send and receive query strings via links in Angular 9?AngularHow to use GROUPING SETS to boost GROUP BY queries in Postgres?Postgres