Например, если перейти во вкладку «Builder Element», то там можно обнаружить такие компоненты, как Youtube и Vimeo, которые осуществляют вставку видео с одноименных платформ видеохостинга. Там даже есть вставка аудио-файлов через платформу Soundcloud.

Однако в настоящей заметке мы рассмотрим, как вставить на страницу видео-файл, не выкладывая его на сторонние площадки, залив ролик только на свой сервер.

Итак, перейдём в левом меню в «Медиафайлы», затем в выпадающем меню в «Библиотека файлов». Загружаем видеоролик в формате mp4, данный формат на сегодняшний день поддерживается всеми современными браузерами.

После загрузки нужно зайти в «Параметры файла», кликнув по загруженному файлу, который появится в общем списке. В открывшемся окне справа будет ссылка на видео-файл. Эту ссылку нужно скопировать.

Переходим на страницу, куда необходимо добавить ролик. Перетаскиваем компонент «Code» в нужное место и нажимаем иконку редактирования.

В появившемся модальном окне необходимо в поле «Code» вставить следующий код, где в значении атрибута src должна быть ссылка, которую мы запомнили при загрузке ролика в библиотеку:

<video src="/wp-content/uploads/name_video.mp4" controls style="width: 100%"></video>

Стоит отметить, что загружать видео большого размера и высокого качества на свой хостинг не стоит. Пропускная способность большинства хостингов ограничивается 100 Мбит/с. При большой количестве посетителей на сайте возможна ситуация, когда сразу 10-20 человек начнут смотреть ролик, тем самым забьют весь исходящий канал. Сайт начнёт открываться очень медленно, что приведёт к большому количеству отказов.

Добавленные слайды в Avada Elastic Slider

Форма добавления слайда без ссылки

Чтобы появилось поле для ввода ссылки и введенные данные через админку сохранялись, необходимо в файле /wp-content/themes/Avada/framework/metaboxes/options/options_es.php добавить вот такую строку:

$this->text( 'link', __( 'Link', 'Avada' ), '' );

Форма со ссылкой у слайда

Чтобы вывести ссылку в html-коде слайдера на главной странице, необходимо в файле wp-content/themes/Avada/framework/custom_functions.php в функции avada_elasticslider($term) прописать следующий код:

<?php
$link = get_post_meta( get_the_ID(), 'pyre_link', true );

if ($link)
{
?><a href="<?=htmlspecialchars($link)?>"><?
}?>
<?php the_post_thumbnail( 'full', array( 'title' => '', 'alt' => get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ); ?>

<?php								
if ($link)
{
?></a><?
}?>

И html код слайда будет выглядеть так:

<li style="<?php echo ( $count > 0 ) ? 'opacity: 0;' : ''; ?>">
	<?php
	$link = get_post_meta( get_the_ID(), 'pyre_link', true );
	
	if ($link)
	{
	?><a href="<?=htmlspecialchars($link)?>"><?
	}?>
	<?php the_post_thumbnail( 'full', array( 'title' => '', 'alt' => get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ); ?>
	
	<?php								
	if ($link)
	{
	?></a><?
	}?>
	
	<div class="ei-title">
		<?php if ( get_post_meta( get_the_ID(), 'pyre_caption_1', true ) ): ?>
			<h2><?php echo get_post_meta( get_the_ID(), 'pyre_caption_1', true ); ?></h2>
		<?php endif; ?>
		<?php if ( get_post_meta( get_the_ID(), 'pyre_caption_2', true ) ): ?>
			<h3><?php echo get_post_meta( get_the_ID(), 'pyre_caption_2', true ); ?></h3>
		<?php endif; ?>
		

	</div>
</li>

По аналогии можно у слайда добавить другие поля.