/ Адаптивность / Видео на сайте

Видео на сайте

HIT

Знакомимся с различными способами и сервисами (youtube, vimeo и т.д.) добавления видео на страницу сайта.

Vimeo

<iframe src="https://player.vimeo.com/video/130903027" width="500" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

YOUTUBE

<iframe width="500" height="500" src="https://www.youtube.com/embed/BeaW2qq8wAk" frameborder="0" allowfullscreen></iframe>

attachment

[video width="1280" height="720" mp4="/wp-content/uploads/2015/12/Victorias-Secret-Knockout-HD.mp4"][ /video]

или без шорткода

<video width="600" height="400" controls="controls" src="/wp-content/uploads/2018/12/books_2.mp4"><source type="video/mp4" src="/wp-content/uploads/2018/12/books_2.mp4"></video>

Убрать управляющие элементы видео:

.mejs-controls {
	display: none !important;
	visibility: hidden !important;
}

Старт / пауза видео с помощью jQuery

$('#sample_video').trigger('play'); 

$('#sample_video').trigger('pause');

//общий тег для всех видео
$('video').trigger('play');

Автозапуск video

С 2018 года в браузерах запрещен автозапуск видео со звуком. Можно автозапускать видео с парметром muted.

Запустить видео с помощью jQuery также не получится — т.к. браузер считает что не было действий со стороны пользователя и считает как обход запрета (failed because the user didn’t interact with the document first).

Единственным способ автозапустить видео со звуком является размещение на youtube и размещение видео в iframe с autoplay в url.

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Вкладка видеообзор

Вкладка видеообзор

Для некоторых товаров в интернет-магазине требуется видеообзор — сделаем для них на странице товара вкладку. Создаем дополнительное поле Видеообзор Создаем вкладку Видеообзор Проблема X-Frame-Options Проблема X-Frame-Options решается следующим образомдля youtubeперед Читать далее »

Фон — видео

Фон — видео

Очень эффектно, для главной страницы, смотрится фон из видео. Рассмотрим основные моменты данной «фишки». Добавление видеофона в вёрстку CSS стили, адаптация под размер области, с наложением пиксельной сетки поверх видео Читать далее »

Произвольное поле — Видео

Произвольное поле — Видео

Тип поля Видео В произвольных полях изначально отсутствует тип поля Видео. Его можно добавить небольшим плагином acf-field-video. Просто копируем папку acf-field-video-master в папку plugins и в админке включаем его. Далее Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Видео на сайте
Интеграция Woocommerce с 1С
Рекомендации для васИнтеграция Woocommerce с 1СOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.