Меню Закрыть

—Размещение ВИДЕО

(Редакция февраля 2025)

Локальные видео (файлы которых лежат на 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>

Вышеприведенный код отобразит  видео в блоке с размерами, заданными атрибутами width и height.  То есть есть будет иметь фиксированные размерамы, и на разных устройствах будет занимать разную часть экрана.

Чтоб получить блок с видео, предсказуемо занимающим некоторую определенную долю на любом экране, надо в полученный фрейм внести две поправки.

  1. Элемент  iframe нужно обернуть в див с классом class=’ш2′
  2. Значения атрибутов width и height заменить на  ‘100%’.
  3. Можно добавить ещё атрибут title, придав ему значение в виде строки, которая будет всплывать над видео.

Класс .ш2 будет упаковывать видео в блоки шириной в половину окна и  выравнивать видео влево. Если видео имеет старый формат 4:3, то надо применить особый класс «ш243».

В малых окнах (менее 700px шириной, это обычно телефон) названные блоки браузер автоматически расширяет до ширины до полного окна.

В ИТОГЕ Вставку видео  разумно проделывать таким порядком:

  1. Получить код элемента iframe в буфер, перейти в текстовый режим редактора и вставить код в нужное место.
  2. Выделить вставленный  код и нажать кнопку «Видео». В итоге  iframe будет обернут в элемент DIV.
  3. Изменить оба значения атрибутов width и height  в ‘100%’.
  4. В большинстве случаев выше приведенный код надо обернуть в дивизию с классом «ш2» и получить примерно следующее:

<div class=»ш2″>

<iframe

title=»Здесь строка, которая будет всплывать при размещении мыши над видео»

src=»https://www.youtube.com/embed/N9uhJjKFTzk»              /* сетевой адрес видео, обязательный параметр */

width=»100%»   height=»100%»    /*  в присутствии классов .ш2, .ш3  эти атрибуты нужно изменить до указанных значений  */

frameborder=»0″ allowfullscreen> /*  первый атрибут убирает рамку вокруг видео,  второй разрешает разворачивать видео  */

     </iframe>

</div>