Локальные видео (файлы которых лежат на verenitsa.ru) лучше запускать плагинами. Иначе видео будут автоматически запускаться после загрузки страницы!
Пример стандартной вставки видео из ютюба:
Видео с ВК и Ютюба нужно подключать фреймами. Коды фреймов берутся соответственно с ВК и Ютюб.
Элемент iframe обыкновенно генерируется сайтом, откуда берется видео. Например, на сайте youtube.com под видео, если нажать ПОДЕЛИТЬСЯ, то выскочит окошко, где надо нажать ВСТРОИТЬ — появится код элемента <iframe … </iframe>, который надо просто скопировать.
В iframe содержание атрибутов width=”560″ height=”315″ не имеет значения. Их можно просто стереть.
Фрейм (элемент iframe) с видео полено завернуть в дивизию со спуциальными классами video, f2 и а43. Тогда видео станет адаптивным, то будет менять размер, подстраиваясь к экрану.
Класс “video” определяет блок для размещение видео шириной равной ширине окна браузера. По умолчанию подразумевается пропорции блока 15:9, сто отвечает современному формату видео. Если видео имеет старый формат 4:3, то к классу .video надо добавить класс .f43.
Комбинированный класс “video f2” сужает ширину блока для видео до половины ширины окна. Но в узком окне (менее 640px, это обычно на телефоне) такой блок будет расширяться до полной ширины окна.
Приведем пример кода для видео, которое будет вписано в окно браузера, занимая 50% его ширины :
<div class=”video f2″>
<iframe
title=”Здесь строка, которая будет всплывать при размещении мыши над видео”
src=”https://www.youtube.com/embed/N9uhJjKFTzk” /* сетевой адрес видео */
width=”560″ height=”315″ /* необязательная строка, которую можно стирать */
frameborder=”0″ allowfullscreen>
</iframe>
</div>
Возможно также размещение видео с ВК и Ютюба в блоке, выровненном влево и занимающем 50% ширины экрана.
Такое приятнее смотрится на больших экранах (тем более, что на узком экране сайт Вереницы расширяет этот блок до 100%).
Для блока который всегда будет иметь ширину равной ширине окна вышеприведенный код нужно начать так:
<div class=”video”> <iframe …
Если же видео имеет старый формат 4:3, который сейчас почти не применяется, то к классу .video надо добавить класс .f43 и получится, например, следующее:
<div class=”video f2 f43″> <iframe …