How to embed YouTube or other video links in WordPress?

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:

Here’s what the oEmbed field interface looks like:

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'); ?>
</div>

How to display ACF value with additional attributes?

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

<?php

// 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'); ?>
</div>

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

Share this post