видеофон для сайта

Видеофон на сайте без скриптов и без плагинов

Еще одна модная тенденций сайтостроения — это видеофон на сайте, как же его сделать без использования скриптов и без плагинов.

Для вставки видеофона на сайте достаточно воспользоваться следующим кодом:

<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
    <video id="video" no-controls autoplay preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png" style="width:100%; height:100%">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
      <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
      <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
</div>

Для примера, давайте добавим видеофон на wordpress сайт со стандартной бесплатной темой — Twenty Twelve (скачать данную тему можно из админки wordpress: пункт «Внешний вид» — подпункт «Темы» — жмем на ссылку «Добавить новую» и в строку поиска вводим Twenty Twelve).

А для этого заходим в админку wordpress, в левом меню выбираем пункт — «Внешний вид» и его подпункт «Редактор» и справа в списке шаблонов выбираем файл «header.php»:

Здесь сразу после тега «body», в данной теме он выглядит так:

<body <?php body_class(); ?>>

вставляем следующий код:

<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
    <video id="video" no-controls autoplay preload="none" poster="http://files.www.newmediacampaigns.com/blog-drafts/adding-ambient-video-backgrounds-websites/video-still.jpg" style="width:100%; height:100%">
      <source id="mp4" src="http://files.www.newmediacampaigns.com/blog-drafts/adding-ambient-video-backgrounds-websites/MVI_1272.mp4" type="video/mp4">
      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
</div>

В итоге у нас получиться следующее:
видеофон для сайта

Также можно вставить видео в верхней части сайта — что-то вроде шапки с видеофоном.
Для этого просто убираем код блока div из вышеуказанного кода и у нас останется следующий код:

<video id="video" no-controls autoplay preload="none" poster="http://files.www.newmediacampaigns.com/blog-drafts/adding-ambient-video-backgrounds-websites/video-still.jpg" style="width:100%; height:100%">
      <source id="mp4" src="http://files.www.newmediacampaigns.com/blog-drafts/adding-ambient-video-backgrounds-websites/MVI_1272.mp4" type="video/mp4">
      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>

В итоге у нас получиться следующее:

видеофон на сайте без плагинов и скриптов

Если вы хотите уменьшить ширину видео файла, подкорректировать его, наложить красивые эффекты для видео, то в этом вам поможет Видеоредактор Movavi – программа для создания видео на русском языке.

Если вы хотите разместить на фоне надписи, то можно добавить еще один блок с текстом поверх видео, разместить данный код можно сразу за вышеуказанным кодом вставки видеофона:

<div class="overlayheadlines">
            <div class="headlines" style="margin: 301.5px 0px;">
                <div class="container">
                    <h1>Создавайте сайты с mnogoblog.ru</h1>
                </div>
            </div>
        </div>

В итоге код будет выглядеть так:
код для вставки видеофона на сайт

Также нужно прописать стили для блока «overlayheadlines» — поэтому заходим в файл стилей — style.css (админка wordpress — пункт «Внешний вид» — подпункт «Редактор» — справа в списке шаблонов выбираем файл — style.css) и в самый низ вставляем следующий код:

.overlayheadlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

И в результате у вас получиться следующее:
видеошапка на сайте