oEmbed

Overview

The oEmbed field allows an easy way to embed videos, images, tweets, audio, and other content. This field makes use of the native WP oEmbed functionality.

Screenshots

Settings

  • Embed size: Define the width and height settings for the embed element

Notes

This field type was added in version 5.0.0.

Template usage

The oEmbed field will return a string containing the embed HTML. Please note that due to the large number of embed providers, no settings are available to customize the embed features such as overlays and buttons. To customize these settings, you will need to perform a search / replace on the string to add additional arguments to the iframe src.

Basic

This example will display an oEmbed.

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

Advanced

This example will add extra attributes to both the iframe src and html.

<?php

// get iframe HTML
$iframe = get_field('oembed');


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


// add extra params to iframe src
$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);


// echo $iframe
echo $iframe;

?>

Responsive Embeds

Thanks to the work done by embedresponsively.com, it is now possible to make embeds responsive. Please view the website to learn more as each provider may need different CSS settings.

<div class="embed-container">
	<?php the_field('oembed'); ?>
</div>
<style>
	.embed-container { 
		position: relative; 
		padding-bottom: 56.25%;
		height: 0;
		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%;
	}
</style>