Как сделать фон для сайта видео – Как вставить видео в качестве фона блока фиксированного? — Хабр Q&A

Как сделать видео фоном сайта

Как поставить видео на фонВсем привет. Сегодня хотел бы вам рассказать о таком интересном эффекте, как видеофон для сайта. Кому-то покажется это полной ерундой, но на некоторых проектах это действительно неплохо сочетается с общим дизайном. Конечно, у этого эффекта много как плюсов, так и минусов и все зависит от задач, но то, что видеофон на сайте позволит выделиться среди конкурентов — факт.

Давайте посмотрим примеры подобных сайтов. Большинство из них, неоправданно долго грузятся — и это главный минус видеофона. Но это не всегда так. Все зависит от того, как оптимизировано видео, какой оно продолжительности и так далее. Можно и css код раздуть до безобразных размеров, а можно грамотно оптимизировать и сократить вес в 2-3 раза. (Кстати, об оптимизации css кода можно почитать в этой статье)

Итак примеры:

как сделать видео фоном

как сделать видео фон

как сделать видео фон

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

Кроме того, проанализируйте свой трафик, и если окажется, что много пользователей с мобильных устройств, то тем более не стоит использовать видеофон, так как мобильный интернет, пока еще, не настолько быстр. Казалось бы, очевидные вещи повторяешь много раз, но все равно находятся такие, кто этого не понимает.

Как сделать видео фоном сайта?

Разбираясь в вопросе ,как добиться эффекта с видеофоном, в свое время, я обнаружил несколько способов. Одни из них проще, другие сложнее, некоторые требуют javascript, а другие нет. Сегодня я расскажу вам о том, как добиться подобного эффекта без всяких там скриптов. Приступим…

Сразу прошу извинить за качество видео. Оно 720p, так что большие мониторы — вам привет! Прошу камнями не кидать, это только в качестве примера, а вы все равно будете подбирать под те разрешения, на которые ориентирован проект.

Итак, помните статью, в которой мы говорили про то, как вставить видео на сайт при помощи тегов html5? Сегодня знания от туда нам пригодятся. А в этой статье я не буду подробно описывать каждую строчку.

Html разметка

Сразу после тега </body> вставьте фоновое видео на сайт следующим образом. Если хотите подробнее разобраться, читайте статью, о которой я упоминал выше.



<video autoplay loop>
   <source src="video/video2.mp4" type="video/mp4">
   <source src="video/video1.webm" type="video/webm">
   <source src="video/video3.ogv" type="video/ogg"/>
</video>

   <p>Smartlanding</p>

Css разметка

Для того, чтобы видео занимало всю ширину экрана и фон был неизменным на всем сайте — добавьте следующие стили:



video{
   position:fixed;
   z-index:-1;
   min-width:100%;
   min-height:100%;
   overflow:hidden;
}

p{
 font-family: 'courgette';
 color:#fff;
 font-size: 80px;
 text-align: center;
 padding-top: 20%;
 text-shadow: 0 1px 1px #000a33;
}


Но, если хотите сделать видеофон только, например, первого экрана, то измените значение position на absolute. Буду искать еще способы подключения видео в качестве фона, так как не люблю я это абсолютное позиционирование. Даже текст подвинул padding_ом. Но страничка грузится намного быстрее чем те, которые были в примере.

Если вам известны другие способы реализации подобного эффекта, то пишите в комментариях — обсудим.

Скачать исходник

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

Серёжа Сыроежкин

Серёжа СыроежкинКопирайтер

В текущей статье мы поговорим о том, как установить видео в качестве фона для сайта (video background). Видео в качестве фона страницы можно сделать только с помощью HTML5. Для этого мы:

  • Используем тег video на HTML-странице;
  • С помощью CSS-стилей растянем видео на весь экран и используем в качестве основного фона.

Создаем видеоплеер с помощью HTML

О том, как сделать видеоплеер у себя на сайте с помощью HTML5 мы уже говорили в статье Проигрыватель видео HTML5. В той же статье мы обсуждали вопрос кроссбраузерности, вспомним основную идею:

Не все браузеры воспроизводят какой-то конкретный видео-формат, поэтому нужно использовать несколько видео-кодеков. Браузер клиента автоматически определит поддерживаемый формат из предложенных и воспроизведет нужное видео.

Поэтому, создадим видео для фона сайта в двух форматах: H.264 и WebM. Этого будет достаточно, чтобы охватить основной ряд современных браузеров (Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer). Полученное видео рекомендуется обернуть в тег div для последующего позиционирования. Получим следующий код HTML:

<div>
 <video loop="loop" autoplay="autoplay" preload="auto">
   <source src="nubex.mp4"></source>
   <source src="nubex.webm" type="video/webm"></source>
 </video>
</div>

Благодаря атрибуту autoplay видео будет проигрываться сразу после загрузки страницы, когда решит браузер (поскольку атрибут preload стоит на значении

auto).

Настраиваем стили с помощью CSS

Рассмотрим теперь CSS-код для видео.

Полный код страницы с установленным видео в качестве фона сайта:

<html>
 <head>
   <title>Видео в качестве фона сайта - Нубекс</title>
  <style>
	.overlay {width: 100%; height:100%; display:block;}
	#nubexDiv {
		top: 0; bottom: 0; left: 0; right: 0;
		position: fixed;
		overflow: hidden;
	}
	#nubexVideo {
		top: 0; left: 0;
		position: absolute;
		width: auto; height: auto;
		min-width: 100%; 
		min-height: 100%; 
	}
  </style>
 </head>
 <body>
	<div>
 	 <video loop="loop" autoplay="autoplay" preload="auto">
   		<source src="nubex.mp4"></source>
   		<source src="nubex.webm" type="video/webm"></source>
 	 </video>
	</div>
 </body>
</html>

Здесь мы, по-сути, добавляем блок с видео с помощью HTML, и с помощью CSS растягиваем его на весь экран.

Смотрите также:

Полноэкранный видео-фон для сайта HTML5

На протяжении прошлого года веб-дизайнеры все чаще стали использовать оригинальный способ оживить сайт – установка видеоролика в качестве фона страницы. Интересный сюжет или просто «живая» картинка на фоне украсит даже обычный сайт-визитку, заинтересует пользователя и подвигнет дольше задержаться на сайте. Сегодня мы поделимся с вами одним из способов установить полноэкранный видео-фон для сайта на HTML5 и CSS.

Демо Загрузить архив RAR (6.3 MB)

Рекомендации

Если вы твердо убеждены, что хотите установить видео для фона на сайте, необходимо знать кое-какие нюансы:

  1. Во-первых, нужно обязательно помнить о том, что видеоролик имеет довольно большой вес. Это может негативно сказаться на скорости загрузки страницы, особенно если у пользователя медленный интернет. Поэтому выбирайте не слишком продолжительные по времени видеоролики. В случае, когда требуется использовать довольно длинное видео, будьте готовы либо к работе над уменьшением его веса, либо к тому, что придется жертвовать частью аудитории.
  2. Во-вторых, избегайте автовоспроизведения звука из видео. Используйте либо ролики без аудио, либо добавьте возможность пользователю самому включить звук, если ему это понадобится. Автоматическое воспроизведение звука при открытии сайта считается очень дурным тоном.
  3. В-третьих, нужно позаботиться о кроссбраузерности и корректном отображении и воспроизведении видео на всех устройствах, а также предоставить альтернативу видео (для тех случаев, если оно не воспроизведется). Ниже в нашем примере мы покажем, как это сделать.
  4. И в-четвертых, стоит хорошо подумать, уместен ли видеофон на том сайте, где вы захотели его установить, поскольку очень легко переступить грань между оригинальностью и бесполезностью данной затеи. Видео ни в коем случае не должно отвлекать пользователя от его главной цели, по причине которой он пришел на сайт. Устанавливая видео-фон под текстовым содержимым, не забудьте проверить, насколько читабельным стал текст. Например, он может слиться с фоном в определенный момент проигрывания видеоролика (белый текст на белом фоне, черный на черном и т. п.).

1. HTML

Для нашего примера взят видеоролик с разрешением 1920×1080, продолжительностью 15 секунд и весом чуть больше 3 МБ. Внутри блока <div> с идентификатором video-bg находится наш фон:


<div>
    <video preload="auto" autoplay="autoplay"
    loop="loop" poster="bg/daisy-stock-poster.jpg">
        <source src="bg/daisy-stock-h364-video.mp4" type="video/mp4"></source>
        <source src="bg/daisy-stock-webm-video.webm" type="video/webm"></source>
    </video>
</div>

Для тега <video> указаны следующие атрибуты:

  • width – ширина области для воспроизведения ролика;
  • height – высота области;
  • preload – загрузка видео вместе со страницей;
  • autoplay – автоматическое воспроизведение видео;
  • loop – циклическое повторение видео;
  • poster – изображение, которое отображается вместо видео, пока оно загружается либо недоступно.

Далее у нас записано два тега <source>, где указаны URL-адреса видео в разных форматах – MP4 и WEBM. Зачем подключать ролик в нескольких форматах? Дело в том, что не все браузеры поддерживают один-единственный формат видео. Чтобы видео смогли распознать все современные браузеры, необходимо предоставить файл хотя бы в этих двух форматах. А атрибут type

с соответствующими значениями помогает браузеру быстрее определиться с выбором.

2. CSS

Наша таблица стилей для фона выглядит следующим образом:


#video-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
    background: url(bg/daisy-stock-poster.jpg) no-repeat #94a233;
    background-size: cover;
}

#video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto; 
}

 @supports (object-fit: cover) {
     #video-bg > video {
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
 }

Как видно из кода, фон установлен на всю страницу, а в качестве запасного фона задано изображение (кадр из этого же видео). В самом крайнем случае будет задействован цвет фона #94a233.

Также в коде есть директива @supports, которая проверяет, поддерживает ли браузер свойство object-fit. Если да, то фон принимает значение cover и пропорционально отображается при разных размерах экрана.

Согласно данным с сайта caniuse.com, на сегодняшний день свойство object-fit поддерживается всеми браузерами, кроме Internet Explorer, Firefox 31-35, safari 7, iOS Safari 7.1 и Android Browser 4.1-4.4.

Вот и всё. Надеемся, данный урок принес вас пользу. Если у вас есть другие интересные и простые способы установки видео в качестве фона для сайта и вы хотите поделиться ими, пишите в комментариях!

Как сделать youtube видео фоном для сайта

Как сделать YouTube видео фоном для сайта

От автора: моя статья о том, как с помощью CSS поставить в качестве фона на страницу полноэкранное HTML5 видео оказалась одной из самых популярных на сайте The New Code. Однако в этом методе есть значительный недостаток – пользователям приходится размещать ролики на своих ресурсах или искать сервисы для этого.

В качестве альтернативы можно использовать YouTube видео как фон для сайта, но на протяжении долгого времени я думал, что ролики данного сервиса нельзя толком контролировать: дело не только в том, что iframe плохо контролируется и стилизуется, но и другие решения типа tubular работают на JavaScript. Очень часто подключен какой-либо фреймворк типа JQuery, помогающий браузеру правильно позиционировать и проигрывать видео, повторно вычислять размер видео после изменения размера окна браузера. Я не считал и не считаю такие подходы элегантными и эффективными.

Совсем недавно после исследований и пары экспериментов было выяснено, что с помощью обычных HTML5 и CSS можно установить видео с YouTube в качестве фонового рисунка страницы без использования JS или специальной разметки. Для демонстрации я создал два демо.

Разметка

Наш способ является производным от метода Florent Verschelde для полноэкранного видео на странице в качестве фона:

Как сделать YouTube видео фоном для сайта

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<div> <div> <iframe src=»https://www.youtube.com/embed/W0LHTWG-UmQ? controls=0&showinfo=0&rel=0&autoplay=1&loop=1 &playlist=W0LHTWG-UmQ» allowfullscreen></iframe> </div> </div>

<div>

    <div>

        <iframe src=»https://www.youtube.com/embed/W0LHTWG-UmQ?

controls=0&showinfo=0&rel=0&autoplay=1&loop=1

&playlist=W0LHTWG-UmQ» allowfullscreen></iframe>

    </div>

</div>

В разметке для видео есть два div, внутри которых iframe. Этот код идет первым на странице. Если вы хотите пройти валидацию HTML страницы, замените знаки & в адресе на &amp;. Далее идет еще один DIV со всем контентом страницы:

<div> … </div>

<div>

</div>

Необходимо слегка объяснить URL в iframe. Начинается он так же, как и стандартный код для вставки, но имеет ряд дополнений: https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&start=0

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

Как сделать YouTube видео фоном для сайта

Стили для разметки:

.video-background { background: #000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -99; } .video-foreground, .video-background iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } #vidtop-content { top: 0; }

.video-background {

    background: #000;

    position: fixed;

    top: 0; right: 0; bottom: 0; left: 0;

    z-index: -99;

}

.video-foreground,

.video-background iframe {

    position: absolute;

    top: 0; left: 0;

    width: 100%; height: 100%;

    pointer-events: none;

}

#vidtop-content {

    top: 0;

}

Как сделать YouTube видео фоном для сайта

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Данный код растягивает видео на всю страницу, эквивалент background-size: cover для iframe. А pointer-events: none делает так, чтобы при правом клике мыши не показывалось контекстное меню YouTube. Осталось немного дополнить CSS медиа запросами для соотношения сторон:

@media (min-aspect-ratio: 16/9) { .video-foreground { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .video-foreground { width: 300%; left: -100%; } }

@media (min-aspect-ratio: 16/9) {

    .video-foreground { height: 300%; top: -100%; }

}

@media (max-aspect-ratio: 16/9) {

    .video-foreground { width: 300%; left: -100%; }

}

Запросы растягивают видео на всю область просмотра, когда сужается окно браузера (соотношение стандартное 16/9). В следующей статье я отдельно расскажу про соотношение сторон.

Условия YouTube

В дополнении к общим условиям, о которых я говорил выше, когда видео для фона размещается на сайте, стоит учесть дополнительные условия при использовании YouTube видео:

Нельзя поставить видео на паузу, по крайней мере с помощью этого метода. В YouTube API есть способ поставить видео на паузу, но о нем я расскажу в следующей статье.

В начале видео будет появляться логотип YouTube; также можно подключить рекламу.

Большинство видео YouTube со звуком, что будет отвлекать пользователей. И опять в нашем методе отключения звука не предусмотрено, но он есть в API.

Необходимо проверить, чтобы используемое вами видео было доступно во всех странах: некоторые YouTube видео запрещены к показу в отдельных странах. Т.е. вы можете его видеть, а ваши географические соседи нет. (Проще всего это проверить через VPN сервис, открыв страницу через сервер другой страны)

Данный метод может нарушать правила Google: «Если вы используете встраиваемый проигрыватель на своем сайте, его нельзя изменять, доделывать или блокировать часть функционала. Ссылку на YouTube можно не указывать.»

Но мы не нарушаем права и можем противопоставить этому несколько аргументов:

YouTube самолично предоставляет возможность прятать часть функционала; мы ничего не взламываем.

Если понимать ограничения буквально – то, что мы просто сделали видео адаптивным будет рассматриваться как нарушение.

Но как всегда решение использовать данный код и ответственность зависит от вас.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Как сделать YouTube видео фоном для сайта

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Как сделать YouTube видео фоном для сайта

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Как поставить видео с Youtube на фон сайта

Как поставить видео на фон лендинг пейджВсем привет. Позавчера в ВК списался с одним парнем, который хотел сделать видеофон для сайта. (Привет Стас 🙂 Надеюсь ты не против, что я пишу эту статью подобным образом). Так вот, у него возникла проблема. С его слов я понял, что он делает сайт на конструкторе и загрузить свои видео на хостинг — нет возможности. Единственный способ, как он сказал, это подключить видео со стороннего сервиса.

Способ создать видеофон для сайта, описанный мной в этой статье отпадал. В такой ситуации можно было пойти несколькими путями, но когда я открыл исходник, который скинул Стас, то обнаружил что он пытается подключить видео с Youtube.

Эта идея мне показалась очень интересной, и я решил разобраться, как это можно сделать. Признаться, когда я готовил первую статью о том, как сделать видео фоном сайта, то натыкался на подобный материал и знал, что это возможно, но разбираться не стал, а тут такой случай!

Я скинул Станиславу 2 ссылки, одну с хабра, одну с другого сайта. Сказал, что вот варианты, но я сам не тестировал и не знаю получиться ли. Он поблагодарил и пообещал отписаться о результатах. То есть еще один человек, который не остался равнодушен. Спасибо таким людям.

Вот я и решил поделиться с вами одним таким способом, думаю, что многим будет интересно.

Как поставить видео с Youtube на фон сайта

Скачать исходник

Первым делом нужно скачать исходник, там в папке js будет лежать 2 скрипта. Их нужно скопировать в свой проект. После этого подключаем jquery и прописываем пути к скриптам:



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- подключаем jquery -->
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script> <!-- подключаем плагин -->
<script type="text/javascript" charset="utf-8" src="js/index.js"></script> <!-- добавляем id видеофайла с Youtube -->


Теперь, для того, чтобы вставить свое видео, нужно в скрипт подставит id видео файла из ссылки на Youtube:

Файл index.js:

Как сделать видео с Youtube фоном сайта

Обратите внимание, я выделил красной стрелочкой id видео ролика, которое использую для примера в исходнике. Взять его можно здесь:

youtube видео на фон

Убедитесь, что в ролике не присутствует реклама или ссылки на другие материалы, как в примере выше. Я специально взял такое видео, чтобы вы наглядно убедились и не допустили подобной ошибки. Start: 3 — означает, что видео начнет воспроизводится с 3 секунды. Другие настройки найдете в файле jquery.tubular.1.0.js, начиная с 19 строки. Звук, ширина и высота, кнопки управления и т.д.

Еще, важным элементом является то, что нужно заполнить видеофоном конкретную область. В скрипте используется контейнер с id=»wrapper». Как по мне, то это очень удобно.


<div>

 <p>smartlanding.biz</p>

</div>

А на сегодня — все! Теперь вы знаете как поставить видео с Youtube на фон сайта. Всем пока!

P.s.: Для того, чтобы посмотреть результат, залейте на локальный или реальный сервер.

Как добавлять фон в Видеоредактор.ru

Фон

Фон в видеоредакторе представлен отдельным видеорядом.

Фоновый видеоряд находится правее музыкальной дорожки и левее основного видеоряда.

Графические файлы в кадре сменяют друг-друга также, как и везде в редакторе, сверху вниз — картинка выше сменяется картинкой ниже по вертикальному ряду.

Параметры фона находятся среди остальных параметров, сразу под основным редактором.

Автоматически

По умолчанию, видеоредактор создает фон из основного видеоряда, добавляя эффект размытия.

Для отключения/включения размытия используйте фильтры фона.

Для автоматического создания существует параметр «Создавать».

Добавить фон

Для добавления фотографий, картинок и видео в качестве фона:

  1. Добавь файлы соответствующей кнопкой.
  2. Перетащи файлы на фоновый видеоряд.

Красивые картинки и фото

Для создания красивого фона можно использовать бесплатные картинки, фото и видео из фотобанка «Pixabay».

Искать красивые фото и картинки следует по ключевым словам, например «цветы», «шарики» и «любовь».

Размытие фона

  1. Нажми на фильтры фона.
  2. В открывшемся редакторе добавь фильтры «размытие» или «ящик размытия».

В случае, когда требуется размыть не весь фон, а только один или несколько фоновых элементов:

  1. Нажми на размываемое фото или видео.
  2. Открой редактор кнопкой .
  3. Добавь фильтры размытия — «размытие» или «ящик».

Музыка для фона

Собственная песня

Достаточно добавить свои песни и музыку кнопкой загрузки.

Бесплатная музыка

Для вашего удобства мы подключили бесплатную коллекцию музыку «Jamendo». Совершенно бесплатная музыка самых разных стилей и настроений для вашего видео.

Из другого видео

В случае, когда музыка содержится в другом видео:

  1. Добавить видео.
  2. Перетащи видео влево, на звуковую дорожку. Из видео на звуковой дорожке видеоредактор использует только звуковой ряд.

Обрезать музыку для фона

Если требуется использовать только часть музыкального файла:

  1. Нажать на файл.
  2. Открыть редактор кнопкой .
  3. Двигая ползунки выбрать фрагмент.
Подробнее о том, как обрезать музыку.

Адаптивное видео для фона блока

Очень удобный и простой в использовании плагин jQuery для создания адаптивного видеофона у блока. С ним не требуется нагромождения ни css ни html кодов, вся конструкция блока выглядит примерно так: <div data-vide-bg=»path/video»></div>

Подключаем библиотеку jQuery и плагин jquery.vide.js и просто добавляем атрибут data-vide-bg=»path/video» к нужному блоку.

Где: path — папка с файлами video.jpg, video.mp4, video.ogv и video.webm

Пример:

<div data-vide-bg=»/demo/vide/video»> <div> Адаптивное видео для фона </div> </div>

<div data-vide-bg=»/demo/vide/video»>

    <div>

        Адаптивное видео для фона

    </div>

</div>

Адаптивное видео для фона

Также можно использовать атрибут data-vide-options для настроек видео. По умолчанию они выглядят так:

volume: 1 громкость (от 0 до 1)
playbackRate: 1 скорость видео (медленнее быстрее)
muted: true отключение звука (true, false)
loop: true повтор (true, false)
autoplay: true автопроизведение (true, false)
position: ‘50% 50%’ позиционирование видео, также как background-position для CSS
posterType: ‘detect’ Тип постера («detect» — автоматически; «none» — без постера; «jpg», «png», «gif»,… — точное расширение.
resizing: true масштабирование видео под размеры блока (true, false)
bgColor: ‘transparent’ цвет для фона блока с видео
className: ‘ ‘ класс для блока с видео

Пример:

<div data-vide-bg=»/demo/vide/video» data-vide-options=»playbackRate: 0.1, position: ‘0 100%'»> <div> Адаптивное видео для фона </div> </div>

<div data-vide-bg=»/demo/vide/video» data-vide-options=»playbackRate: 0.1, position: ‘0 100%'»>

    <div>

        Адаптивное видео для фона

    </div>

</div>

Адаптивное видео для фона

Для того чтобы сделать видеофон на весь экран, нужно прописать атрибут data-vide-bg к тегу body и задать ему 100% высоту и ширину:

Пример:

<!doctype html> <html> <title>Адаптивный видеофон во весь экран / Atuin</title> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <script src=»http://code.jquery.com/jquery-1.12.4.min.js» type=»text/javascript»></script> <script src=»http://atuin.ru/demo/vide/jquery.vide.js»></script> <style> html, body{ height:100%; width:100%; margin:0; display:table; } div { font-size:42px; text-align:center; vertical-align:middle; font-family:verdana; color:#BFE2FF; display:table-cell; } </style> <body data-vide-bg=»/demo/vide/video»> <div>Адаптивный видеофон во весь экран</div> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!doctype html>

<html>

    <title>Адаптивный видеофон во весь экран / Atuin</title>

    <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />

    <script src=»http://code.jquery.com/jquery-1.12.4.min.js» type=»text/javascript»></script>    

    <script src=»http://atuin.ru/demo/vide/jquery.vide.js»></script>  

    <style>

        html, body{

        height:100%;

        width:100%;

        margin:0;

        display:table;

        }  

        div {

        font-size:42px;

        text-align:center;

        vertical-align:middle;        

        font-family:verdana;

        color:#BFE2FF;

        display:table-cell;

        }

    </style>        

    <body data-vide-bg=»/demo/vide/video»>

        <div>Адаптивный видеофон во весь экран</div>

    </body>

</html>    

Выглядеть будет так Автор скрипта: VodkaBears
Файлы и подробное описание тут

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *