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

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

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

<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>

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

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

<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%;
}

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

MnogoBlog

Как создать сайт на wordpress, настроить и оптимизировать wordpress

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

Похожие записи: