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