Обзор
Поле «Медиа» позволяет легко вставлять видео, изображения, твиты, аудио и другой контент. В этом поле используется собственная функциональность 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>