Купить

Медиа (oEmbed)

Скрыть
HashFlare

Обзор

Поле «Медиа» позволяет легко вставлять видео, изображения, твиты, аудио и другой контент. В этом поле используется собственная функциональность WP oEmbed.

Скриншоты

Настройки

Имя Описание
Размер медиа Устанавливает ширину и высоту для встраиваемого объекта.

История изменений

  • Добавлено в v5.0.0

Использование в шаблоне

Поле «Медиа» возвращает строку, содержащую встроенный HTML. Обратите внимание, что из-за большого количества встраиваемого стороннего кода возможности настройки этого поля весьма ограничены. Чтобы настроить эти параметры, вам нужно будет выполнить поиск / замену в строке и добавить дополнительные аргументы в iframe.

Основы

В примере показано, как вывести медиа поле.

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

Продвинутые возможности

В примере показано, как добавлять дополнительные параметры для iframe и html элементов.

<?php

// получим HTML iframe
$iframe = get_field('oembed');


// используем preg_match чтобы найти iframe src
preg_match('/src="(.+?)"/', $iframe, $matches);
$src = $matches[1];


// добавим дополнительные параметры к src
$params = array(
    'controls'    => 0,
    'hd'        => 1,
    'autohide'    => 1
);

$new_src = add_query_arg($params, $src);

$iframe = str_replace($src, $new_src, $iframe);


// добавим дополнительные параметры к html iframe
$attributes = 'frameborder="0"';

$iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe);


// Выведем $iframe
echo $iframe;

?>

Адаптивные медиавложения

Благодаря работе, выполненной embedresponsively.com , стало возможным сделать медиавложения адаптивными. Пожалуйста, изучите сайт по ссылке, чтобы узнать больше, поскольку каждому встраиваемого сервису могут потребоваться разные настройки CSS.

<div class="embed-container">
	<?php the_field('oembed'); ?>
</div>
<style>
	.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%;
	}
</style>