Меню Закрыть

4. Cтраничка, обучающая как размещать ВИДЕО (ред. июль 2024)

Чтобы видео сделать адаптивным, то есть вписывающимся в любой экран, надо использовать следующий прием — завернуть фрейм (элемент 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″>