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


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to link/add CSS file to HTML Document?CSSThe fundamental difference between HAVING and WHERE clauses in PostgresPostgresLIMIT and OFFSET in PostgresPostgresHow to check if the page is single post page in WordPress?WordPressHow to add today’s date in HTML input date value using JavaScript?JavaScriptAn Example of Cross-site Scripting (XSS) Attack in PHP and How to Avoid It?PHP