Как сделать поставить на качестве


  • Как сделать <strong>как сделать поставить на качестве</strong> видео фоном сайта

    Фон для сайта бывает различных видов: текстуры, сплошной цвет, изображение и т.д. Но фоном также еще может быть и видео! Не просто статическое изображение, а "25 изображений в секунду". Понятно то, что не любое видео подойдет для этого, но об этом мы поговорим дальше в статье. Также рассмотрим сам процесс установки, то есть как сделать видео фоном сайта с технической стороны.

    Рекомендую к прочтению следующую статью на тему лендингов, где я подробно рассказал о самых популярных способах создания лендинга:

    Живая демонстрация того, как на фоне сайта располагается видео:

    Скриншот с примером:

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

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

    1 HTML структура

    Определимся со структурой. Мы будем использовать теги HTML5 для вставки видео:

    HTML КОД

    1 2 3 4 5 6 7 8 9 <div class="fullscreen-bg"> <div class="overlay"> <h1>Простой пример<br>фонового видео на сайте</h1> </div> <video loop muted autoplay poster="video/plane.jpg" class="fullscreen-bg__video"> <source src="video/plane.mp4" type="video/mp4"> <source src="video/plane.webm" type="video/webm"> </video> </div>

    Пару слов по коду:

    • Строки: со 2 по 4 — блок затемнения, который содержит заголовок.
    • Строки: с 5 по 8 — часть с видео.

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

    2 CSS стили

    Осталось правильно задать стили, чтобы видео оказалось именно на фоне первого блока:

    CSS КОД

    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 27 28 29 30 31 32 .fullscreen-bg { overflow: hidden; z-index: -100; position: relative; height: 100%; width: 100%; padding-top:45%; }.fullscreen-bg__video { position: absolute; top: 0; left: 0; width: 100%; }.overlay { background: rgba(0,0,0,0.6); position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 4; }.overlay h1 { text-align:center; color:#fff; font-size: 70px; margin-top:17%; }

    Здесь я привел стили только для первого блока на странице. В исходниках Вы можете найти стили полностью для всего демо.

    Но так как интернет на мобильных устройствах по скорости уступает настольных компьютерам, то для ширины экрана менее 786px мы не будем показывать видео, а покажем лишь изображение:

    CSS КОД

    1 2 3 4 5 6 7 8 9 @media (max-width: 767px) {.fullscreen-bg { background: url('../images/plane.jpg') center center / cover no-repeat; }.fullscreen-bg__video { display: none; } }

    На этом всё!

    Где взять красивые видео для фона сайта?

    Рекомендую следующие видеостоки:

    • Coverr.co
    • Mazwai.com
    • PEXELSvideos
    • Videvo.net

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

    Также добавьте данную статью в закладки "CTRL+D", чтобы видеостоки были всегда под рукой.

    Вывод

    Установка в 2 шага. Вам лишь нужно скопировать HTML и CSS в нужное место. Но правильно подобранное видео смотрится очень красиво.

    Успехов!

    С Уважением, Юрий Немец

    Как сделать видео фоном сайта + видеостоки 4.62/5 (92.31%) 13 голос(ов)

    Понравилась статья - расскажи друзьям! :)

    Facebook

    Twitter

    Вконтакте

    Одноклассники

    Google+



    Рекомендуем посмотреть ещё:


    Закрыть ... [X]

    25 хитростей на YouTube, о которых мало кто знает - Мастерок. жж.рф Переделываем мебель своим руками

    Как сделать поставить на качестве Как сделать поставить на качестве Как сделать поставить на качестве Как сделать поставить на качестве Как сделать поставить на качестве Как сделать поставить на качестве

    Похожие новости