ёЛокальные видео (файлы которых лежат на verenitsa.ru) лучше запускать плагинами. Иначе видео будут автоматически запускаться после загрузки страницы!
Видео с ВКонтакте, Ютюба и прочих источников нужно подключать фреймами (iframe). Элемент iframe обыкновенно генерируется сайтом, откуда берется видео.
Например, на сайте youtube.com под видео, если нажать ПОДЕЛИТЬСЯ, то выскочит окошко, где надо нажать ВСТРОИТЬ — появится код элемента <iframe … </iframe>, который надо просто скопировать. На сайте https://rutube.ru/ все очень похоже. Нажать ПОДЕЛИТЬСЯ и потом КОД ВСТАВКИ ПЛЕЕРА.
В итоге в системном буфере окажется примерно такой код элемента iframe:
<iframe
title=»Строка, всплывающая при наведении мыши»
src=»https://www.youtube.com/embed/N9uhJjKFTzk» /* сетевой адрес видео */
width=»560″ height=»315″
frameborder=»0″ allowfullscreen
> </iframe>
Между отрывающим и закрывающим тегами обычно ничего не пишется. А задумано там было размещение сообщения, что браузер не обрабатывает тег iframe. Но таких браузеров уже давно нет.
Фрейм, вставленный в код таким, как был получен, отобразит видео в блоке с размерами, заданными атрибутами width и height. То есть есть будет с фиксированными размерами, и на разных устройствах будет занимать разную часть экрана.
Чтоб получить блок с видео, предсказуемо занимающим некоторую определенную долю на любом экране, надо в полученный фрейм внести две поправки.
- Элемент iframe нужно обернуть в див с классом class=’ш2′
- Значения атрибутов width и height записать по ‘100%’.
- Можно добавить атрибут title, придав ему значение в виде строки, которая будет всплывать.
Класс .ш2 будет упаковывать видео в блоки шириной в 1/2 окна и выравнивать видео влево. Если видео имеет старый формат 4:3, то надо применить классы «ш243».
В малых окнах (менее 700px шириной, это обычно телефон) названные блоки расширяются до полного окна.
Вставку видео разумно проделывать таким порядком:
- Получить код элемента iframe в буфер, перейти в текстовый режим редактора и вставить код в нужное место.
- Выделить вставленный код и нажать кнопку «Видео». В итоге iframe будет обернут в элемент DIV.
- Изменить оба значения атрибутов width и height в ‘100%’.
Таким образом, в большинстве случаев и выше приведенного кода надо добавлением класса получить примерно следующее:
<div class=»ш2″>
<iframe
title=»Здесь строка, которая будет всплывать при размещении мыши над видео»
src=»https://www.youtube.com/embed/N9uhJjKFTzk» /* сетевой адрес видео, обязательный параметр */
width=»100%» height=»100%» /* в присутствии классов .ш2, .ш3 эти атрибуты нужно изменить до указанных значений */
frameborder=»0″ allowfullscreen> /* первый атрибут убирает рамку вокруг видео, второй разрешает разворачивать видео */
</iframe>
</div>