Меню Закрыть

Пробы с вставкой видео

Резюме:

Локальные видео лучше запускать плагинами — тогда они не самозапускаются!

Видео с ВК и Ютюба нужно подключать фреймами.

Пример стандартной вставки видео из ютюба:

1. youtube iframe

Код примера:

<iframe src=”https://www.youtube.com/embed/GAtcdL0yjmQ?si=WdX1s_nNwdgypNrg” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

1а. youtube iframe со стилем

Тот же фрейм из ютюба со стилем “margin: 0 1em 1em 0; float: left; border: dotted green 1px;”:

Его код:

<iframe style=”margin: 0 1em 1em 0; float: left; border: dotted green 1px;” src=”https://www.youtube.com/embed/GAtcdL0yjmQ?si=WdX1s_nNwdgypNrg” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

В стиль добавлено выравнивание влево с обтеканием.

Просто заворачивание видео ничего не меняет.

Параметры iframe :
modestbranding=1 – скрывает логотип YouTube
color=red – красный бар (по умолчанию), color=white – белый цвет прогресс-бара
mute=1 Выключить звук
autoplay=1 запустит видео сразу после загрузки
loop=1 включает воспроизведение по кругу, можно задать список playlist=VIDEO_ID.
start=60 – плеер начнет воспроизведение с 60-й секунды.
end=120 – воспроизведение остановится на 2й минуте
disablekb=1 – отключает управления c клавиатуры
showinfo=0 – перед началом не выводит название и канал видео
playlist=VIDEO_ID_2,VIDEO_ID_3,VIDEO_ID_4 – список видео для воспроизведения, показ начнется после основного видео (VIDEO_ID).

2.iframe из VK со стилем

Вставка через iframe без обертки почему-то дает двойные поля, но только в редакторе. Это незначимо — обычно рамка не нужна.

Пример видео из VК с рамкой вокруг.

Если width и height в iframe пропущены, ширина видео равна 350px.

Код

<iframe style=”margin: 0 1em 1em 0; float: left; border: dotted green 1px;” src=”https://vk.com/video_ext.php?oid=-9891107&amp;id=456239241&amp;hash=fc58855139bbe02c” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

3. iframe из VK со стилем и размерами


В этом примере видео грузится с VK. Без рамки и добавлены размеры 400-400.

Код

<iframe style=”margin: 0 1em 1em 0; float: left;” src=”https://vk.com/video_ext.php?oid=-9891107&amp;id=456239241&amp;hash=fc58855139bbe02c” width=”400px” height=”400px” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

Если width и height в iframe пропустить, ширина видео будет равна 350px.

4. iframe из VK с оберткой в div

Код

<div style=”padding: 0; margin: 0 1em 1em 0; float: left; border: solid green 1px;”><iframe src=”https://vk.com/video_ext.php?oid=-9891107&amp;id=456239241&amp;hash=fc58855139bbe02c” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>

5. iframe с youtube

Код

<iframe style=”margin: 0 1em 1em 0; float: left; border: dotted green 1px;” title=”YouTube video player” src=”https://www.youtube.com/embed/x6p3wFjbZNM?si=UiacydzrUW_s0ajw” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

6. iframe с youtube c классом f2

Код

<div class=”video f2″><iframe title=”YouTube video player” src=”https://www.youtube.com/embed/x6p3wFjbZNM?si=UiacydzrUW_s0ajw” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>

 

Нормально отображается во фронтенде. Но в редакторе видео отсутствует


7. Cвой файл iframe

В этом примере видео грузится с Вереницы.

 !!! В редакторе видео сразу запускается !!!

Код

<iframe style=”margin: 0 1em 1em 0; float: left; border: dotted green 1px;” src=”https://verenitsa.ru/wp-content/uploads/2023/09/kalancha_2024-09-04_11-54-32.mp4″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

8. Свой файл в div

В этом примере видео грузится с Вереницы.

!!! В редакторе видео сразу запускается !!!

Если width и height в iframe пропущены, ширина видео равна 350px.

<div style=”padding: 0; margin: 0 1em 1em 0; float: left; border: solid green 1px;”><iframe src=”https://verenitsa.ru/wp-content/uploads/2023/09/kalancha_2024-09-04_11-54-32.mp4″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>



Теперь примеры с шорткодами

Но!
Их не видно в редакторе.
Они не работают со ссылками на ВК и ютюб!!!

video_player

Вставка видео через  div[ style=”float: left; max-width: 500px; ]  [ video_player file=”https://verenitsa.ru…” ]

Если то же без div, то видео по ширине всегда занимает все окно.

9

[video_player file=”https://verenitsa.ru/wp-content/uploads/2023/09/kalancha_2024-09-04_11-54-32.mp4″]

То же с видео из VK [ video_player file=”https://verenitsa.ru….” ] т

10

[video_player file=”https://vk.com/video_ext.php?oid=-9891107&id=456239241&hash=fc58855139bbe02c”]

evp_embed_video

Через [ evp_embed_video url=”https://…” ] Как и в video_player, ширина видео по умолчанию во весь экран. Ниже видео вписано в тот же DIV, что и предыдущие.
Здесь возможны параметры
autoplay=”true”
width=”640″
ratio=”16:9″
loop=”true”
poster=”http://example.com/wp-content/uploads/images/poster.jpg”
muted=”true”
class=”myclass1 myclass2″
template=”mediaelement”
Шкурка платная:
template=”mediaelement” preload=”metadata¦auto¦none” // metadata – только метаданные (п/у)
По умолчанию шаблон mediaelement загружает «метаданные» видео только при загрузке страницы.
Вы можете установить для него значение «автоматически» или «нет» с помощью параметра предварительной загрузки в шорткоде.

11

[evp_embed_video url=”https://verenitsa.ru/wp-content/uploads/2023/09/kalancha_2024-09-04_11-54-32.mp4″]

То же с видео из ютюба [ evp_embed_video url=”https://…” ]

12

[evp_embed_video url=”https://www.youtube.com/shorts/pcoGVt_PhvU”]

Можно центрировать видео добавив стиль
.wp-video {
text-align: center;
margin-left: auto;
margin-right: auto;
}