YogeshChauhan.com

How to embed YouTube or other video links in WordPress?

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

dreamhost

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 uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

How Routing works in Angular?AngularWhat is the correct way to enqueue multiple CSS files in WordPress?WordPressConditional operator in JavaScript (aka ternary operator)JavaScriptHow to create a sidebar using pure CSS?CSSHow to enable and disable button using JavaScript?JavaScriptWhat is Git?Misc