Чтобы видео сделать адаптивным, то есть вписывающимся в любой экран, надо использовать следующий прием — завернуть фрейм (элемент iframe) с видео в дивизию с классом video.
Элемент iframe обыкновенно генерируется сайтом, от куда берется видео. Например, на сайте youtube.com под видео, если нажать ПОДЕЛИТЬСЯ, то выскочит окошко, где надо нажать ВСТРОИТЬ — появится код элемента <iframe … </iframe>, который надо просто скопировать.
Содержание атрибутов width=”560″ height=”315″ не имеет значения в этом применении. Их можно просто стереть.
В примере ниже видео вписывается в экран, занимая 50% его ширины. В этом примере предполагается современный формат видео 15:9.
<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 f1″> <iframe …
У старых виден формат будет чаще всего 4:3. Тогда надо использовать класс
<div class=”video f2″>