ГлавнаяCSS, JQuery, JavaScript › Как установить видео вместо фона на сайте?


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


видео вместо фона

Приветствую всех читателей — Sozdaiblog.ru!

В этом посте мы поговорим о том, как установить видео вместо фона на сайте.

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

То, что создают и воплощают в жизнь эти ребята, не может оставить равнодушным ни одного Веб-мастера.

Для наглядного примера я подобрал несколько десятков «смелых» проектов, которые хочу Вам продемонстрировать. Все они используют фоновое видео в качестве основного интерфейса.

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




Toutlefilm.com

Фоновое видео



Gudrungudrun.com

видео вместо фона



Uniqlo.jp

широкоэкранное видео



Valentino.com

видеофон



Nike.com

видео вместо фона



Isurfbecause.com

Фоновое видео



Russianstandardvodka.com

видеофон



Tubgin.com

видео вместо фона



Llr-hamburg.de

Фоновое видео



Themetaproject.com

видео вместо фона



Wimvanhenden.be

видеофон



Ohlandmusic.com

видео вместо фона



Sickcityclub.net

Фоновое видео



Maerskfleet.com

видео вместо фона



Iamstarsmith.com

Фоновое видео



Myprovence.fr

видео вместо фона



Lifeofpimovie.com

видео вместо фона



Egorilla.net

Фоновое видео



Johngalliano.com

видео вместо фона



Medianovak.com

видео вместо фона



Rainymood.com

Фоновое видео




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

Лично меня такие способы не устраивают. С flash Video я пока не работаю, а плагины громоздкие и практически все платные.

Немного пораскинув мозгами, я нашёл альтернативное решение поставленной задачи.

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

Чтобы установить видео вместо фона, я воспользовался тегом <video>. Если Вы помните, мы знакомились с ним в предыдущей статье (как сделать видеоплеер для сайта).

В этот раз он снова меня выручил.


2

ДЕМО СКАЧАТЬ



Для начала после тега <body> я поместил вот этот код:

<video id="video_background" preload="auto" autoplay="true" loop="loop">
      <source  src="3.mp4" type='video/mp4'>
      <source  src="3.webm" type='video/webm'>
      <source  src="3.ogg" type='video/ogg'>
    </video>



Как Вы видите, в нём я прописал пути ко всем расширениям видео для правильного отображения во всех браузерах и установил автозапуск.

Следующим шагом было добавление кнопок для управления звуком с помощью другого кода:

<div id='buttons'>
      <button id="player" onclick="document._video.volume+=0.1">Громче +</button>
      <button id="player" onclick="document._video.volume-=0.1">Тише -</button>
</div>



Чтобы всё выглядело красиво, были добавлены CSS стили, которые есть в архиве.

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

На сегодня это всё. До следующих постов...

С уважением, Денис Черников!




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




80 комментариевА что думаете Вы?

  1. Александр Красильный

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

    [Ответить]

    Денис Черников ответил:

    Нужно просто совместить хороший контент с уникальным дизайном и всё будет в ажуре!

    [Ответить]

  2. Томский школьник

    Соглашусь с Сашей! Не особо впечатляет, такая «фишка» пока что такая не нужна! Возможно в будущем... но сейчас нет. Я тоже даже и применить эту фишку никуда не могу. Но все равно спасибо за старания, Денис! :-)

    [Ответить]

    Денис Черников ответил:

    Пожалуйста! Главное, что Вы теперь знаете, как это делается и где искать!

    [Ответить]

  3. Степан

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

    [Ответить]

    Денис Черников ответил:

    Привет, Степан!Рад что Вам понравилось. На счёт вкуса и мнения я согласен, но развиваться нужно!

    [Ответить]

  4. Людмила

    Идея оригинальная с технической точки зрения, но на мой взгляд задний фон в виде видео будет отвлекать от контента на странице и рассеивать внимание читателя, по крайней мере для блога не подойдет (ИМХО) Возможно для рекламных проектов...

    [Ответить]

    Денис Черников ответил:

    Ещё как подойдёт!Не обязательно отображать видеофон на всех страницах! У меня ведь слайдер только на главной крутиться! Так же и с видео можно поступить!

    [Ответить]

    Людмила ответил:

    Если можно применять к отдельным страницам выборочно, то это другое дело! Тогда — просто отлично.А у вас, Денис где нибудь есть такая фишка?

    [Ответить]

    Денис Черников ответил:

    А почему нельзя! Можно! Пока таких фишек у меня нет! Но чтобы эта фишка была отдельно нужно постараться. У многих это уже реализовано!

    [Ответить]

  5. Катерина

    ООО, спасибо огромное за Ваш труд Денис! Это то, что двигает прогресс! Как раз для своей работы ищу нечто подобное, но как Вы и сказали наталкиваюсь только на платные плагины! А тут такое чудо! Главное знать куда применить и идти в ногу со временем! Еще раз благодарю!

    И да прибудит с Вами трафик!

    С уважением к Вашему творчеству!

    [Ответить]

    Денис Черников ответил:

    Спасибо, Екатерина! Рад, что Вы оценили и уже знаете, как воспользоваться этим способом. Главное фантазия человека!

    [Ответить]

    Влад ответил:

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

    Новое всем не дано понять и принять.Это логика жизни.

    [Ответить]

    Денис Черников ответил:

    Спасибо, за поддержку, Владислав! Буду стараться радовать Вас и всех своих читателей различными новинками!

    [Ответить]

  6. Виктор

    Сайт ив-роше как-будто не косметику рекламирует, а контрацептивы))

    [Ответить]

    Денис Черников ответил:

    У всех свои асоциации!)))

    [Ответить]

  7. Ruslan Abramov

    Баг -->

    Денис Черников Пропиши несколько тегов тегов до тех пор пока не появится ползунок справа !

    Вы увидите что видео не прокручивается а остается на верху !

    [Ответить]

    Денис Черников ответил:

    Руслан, спасибо за подсказку!

    Попробуйте дописать position: fixed; либо в CSS, либо в самом теге видео.

    [Ответить]

    Ruslan Abramov ответил:

    Да . Вот теперь это шедевр :)

    [Ответить]

    Денис Черников ответил:

    Видимо, что всё получилось?

    [Ответить]

    Ruslan Abramov ответил:

    Да получилось . А как сделать кнопки регулировки громкости такие :

    нет=0 , тихо=40 , громко=100 ?

    Денис Черников ответил:

    С ходу не подскажу, нужно смотреть и тестировать! Погуглите!

  8. war100ck

    Подскажите какое разрешение видео стоит на вашем демо? У меня видео показывает в полноэкраном режиме но смещено сильно влево

    [Ответить]

    Денис Черников ответил:

    Разрешение этого видео не играет роль на отображение в браузере.Оно растягивается в зависимости от монитора!

    [Ответить]

    war100ck ответил:

    Но есть ли какие нибудь методы сделать показ видео по центу? Kрутил стили , так ничего и не получилось

    [Ответить]

    Денис Черников ответил:

    Странно, оно и есть по центру! Пробуйте через дивы центрировать!

    [Ответить]

    war100ck ответил:

    Через дивы все остается на прежнем месте , вот сам скрин http: //imageban.ru/show/2013/09/25/89940ba2357ef7030dd0767782e0780c/png

    Разрешение монитора 1280×1024 4:3

    Денис Черников ответил:

    У меня 1680×1050 и всё по центру! Другой комп меньше и тоже всё хорошо!

  9. Евгений

    Прикольно! попробовал сделать, все получилось =)

    вот еще бы сделать возможность подгрузки видео с ютуба, было бы вообще класс!

    [Ответить]

    Денис Черников ответил:

    Такая возможность есть, но я не заморачивался делать!

    [Ответить]

    олег ответил:

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

    [Ответить]

    Денис Черников ответил:

    Ну это уже не от меня зависит!))

    [Ответить]

    олег ответил:

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

    [Ответить]

    Денис Черников ответил:

    Привет, Олег! Нужно в стилях прописать чтобы видео не скролисось! Я сейчас не вспомню, посмотрите в Интернете! Кто-то уже по-моему спрашивал в комментариях!

    [Ответить]

    олег ответил:

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

    #video_background {

    position: absolute;

    поменять на

    #video_background {

    position: fixed;

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Олег! Отлично, возможно это кому-нибудь тоже пригодится!

  10. Нургаян

    Денис, а как вставить свой видеофайл с ютюба?..

    Или с другого видеохостинга? Между чем и чем вставлять в редакторе. И что вставлять?

    И еще, как изменить или вставить другой текст или кнопку в окружность в центре.

    И еще :) )

    как сделать, чтобы не окружность, а прямоугольник?

    [Ответить]

    Денис Черников ответил:

    У меня нет готовых решений нужно верстать скрипты!

    [Ответить]

    олег ответил:

    чтобы окружность стало прямоугольником за это все отвечают стили нужно найти border-radius: 50% либо border-radius: 20px 20px 20px 20px устанавливай свои параметры и все

    [Ответить]

  11. Нургаян

    Денис, Вы пишете:

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

    Денис, а как прописать пути к своим видеофайлам? Как вставить свой видеофайл с ютюба?..

    Или с другого видеохостинга? Между чем и чем вставлять?

    [Ответить]

    Денис Черников ответил:

    В первом коде вместо троек ссылки на Ваше видео с необходимым расширением! Читайте внимательнее пост! И прочитайте пост про тег < video >!

    [Ответить]

  12. Булат

    Как сделать так, чтобы поверх видео справа можно было поставить форму подписки, а слева небольшой текст?

    [Ответить]

    Денис Черников ответил:

    Это не ко мне вопрос!

    [Ответить]

  13. Виктор

    А к кому обращаться с вопросом по поводу отписки от комментов?)) Ссылка в письме ведет на несуществующую страницу.

    [Ответить]

    Денис Черников ответил:

    Ко мне Виктор! летела просто страница, поправить некогда!

    [Ответить]

  14. Евгений

    Смотрим и восхишаемся ))) http: //logistikauto.ru/page/

    вобщем всё достаточно просто, было бы желание ;)

    [Ответить]

    Денис Черников ответил:

    Молодцом!)

    [Ответить]

  15. C-Max

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

    [Ответить]

    Денис Черников ответил:

    Вообще, что-то слышал подобное, но не искал!

    [Ответить]

  16. Андрей

    Вопрос: как кодировать видео фона таблицы, отдельной строчки или столбца В разных местах страницы?

    Как записать код?

    [Ответить]

    Денис Черников ответил:

    Извините, но я ничего из сказанного не понял!

    [Ответить]

    Андрей ответил:

    Спасибо за быструю реакцию.

    Как сделать видео — фон таблицы или разных таблиц на одной странице сайта с помощью HTML5?

    Моя попытка на сайте http ://porog.at.ua/index/0-103 не удалась.

    Капли дождя на стекле окна есть, но под таблицей, а не в таблице.

    И, как вставить аудио с автозапуском на открывание страницы без изображения плеера?

    Извините, а с другие типы видео файлов можно открывать в HTML5, например AVI в виде фона?

    Спасибо за ваши комментарии.

    [Ответить]

    Денис Черников ответил:

    Вам нужно бэкграунд (фон) задать видео! Посмотрите в коде в моём, как это реализовано!

    А всё остальное само будет сверху ложится! Автозапуск аудио есть, но я не могу всё запомнить, в Интернете есть куча с татей на тему автозапуска звука на странице, но это только раздражает посетителей!

    Что же касается форматов то для html5 они стандартные!

    [Ответить]

    Андрей ответил:

    Уважаемый Денис, где разместить тег video бэкграунд (фон) применительно к , — внутри, за ним, спереди или

    <table style="background- ...

    Спасибо.

    Денис Черников ответил:

    Андрей, откройте демо пример и посмотрите исходный код!

  17. Андрей

    Скажите пож. Денис, согласно вашей разработке делаю вставку аналогично для видео фона после тега , но почему то, сначала располагается видео фон, а под ним уже идёт контент. А должно быть контент на видео фоне. В чём проблема?

    [Ответить]

    Денис Черников ответил:

    Андрей, проблема в наложении слоёв Z-index! Забейте Z-index в Интернете, там куча с татей на эту тему!

    [Ответить]

    Андрей ответил:

    Вы знаете, Денис, ставлю плюсовой z- индекс, закрывает полностью текст, ставлю минусовой, где то под низом болтается.

    Как привязать видео фон к конкретной таблице с текстом. Например, беру таблицу, и в ней кодирую видео фон. Как это правильно записать? Какую роль может играет ?, если есть ?

    Делаю по вашему исходнику, текст располагается выше таблицы, или ниже таблицы, но никак не совместно.

    [Ответить]

    Денис Черников ответил:

    Андрей, обратитесь за деньги к фрилансеру!

    [Ответить]

  18. Андрей

    Спасибо за совет

    [Ответить]

  19. Андрей

    Привет.

    Ты мужик, Денис, в самом хорошем и правильном смысле этого слова!

    Спасибо тебе огромное!

    [Ответить]

    Денис Черников ответил:

    Привет, пожалуйста!

    [Ответить]

  20. Владимир

    Оцените пожалуйста еще один сайт с видеофоном – сайт «Живая Удмуртия» – http: //liveudm.ru/ не напрягает ли посетителей? Важно объективное мнение. Спасибо

    [Ответить]

    Денис Черников ответил:

    Если честно, меня напрягло!

    [Ответить]

  21. Anton

    Ничего не получилось, мое видео не возпроизводится, почему? ПОЖАЛУЙСТА ПОМОГИТЕ!

    [Ответить]

    Денис Черников ответил:

    Как я могу помочь? В статье рабочий пример, всё работает!

    [Ответить]

  22. Андрей

    Добился видео вместо фона в шапке сайта. Расположил тег ... сразу за тегом боди. Но это не по правилам.

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

    По поводу ютуба. Я так и сделал. Указал адрес ролика, правда с другого сайта и он благополучно крутился. Но, там решили ролик снять, я и присох.

    Так что вывод: разобраться как ложиться поток информации на страницу по правилам HTML и CSS и вы непобедимы.

    На пример, ваш браузер способен работать с HTML5? Или ваш сайт статический или динамический? Архитектура сайта табличная (самая простая без CSS) или на дивах?

    Кстати,все свойства CSS вы запросто можете внедрить непосредственно персонально в одной стоке или даже части строки. Это очень выгодно при маленьких сайтах в несколько страниц используя выражение style.

    Все теги можете посмотреть в браузере Google в расширении «HTML Справочникe» http: //chrome-extension://igokaaaooaoflibhomenoakijkgnmbbb/htmlbook.html

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

    И последнее, шапка моего сайта выводилась с видео картинкой в поиске. А это супер, сразу идут посетители.

    Всем удачи!

    [Ответить]

  23. Андреу

    Добрый день Денис!

    Не подскажите как наложить фильтр с затемнением на видео или на страницу с видео ? Видео у меня светлое и плохо видны шрифты.

    Спасибо!

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Андрей!

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

    [Ответить]

  24. Кристина

    Классная вещь, спасибо

    [Ответить]

    Денис Черников ответил:

    Я рад что понравилось, пожалуйста!

    [Ответить]

  25. Павел

    Доброго времени суток уважаемый, Денис! идея — шикарна! мне очень понравилась, ещё больше понравилось,когда всё увидел в действии! Скачал твой скрипт, всё работает, сразу видно опытный человек делал. Единственное, если тебя не затруднит, научи,как можно сделать так же но только для много страничного сайта, хочется что бы видео на фоне не воспроизводилось заново,а просто жило своей жизнью:-) заранее огромное СПАСИБО!!!

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Павел!Видео не сможет жить своей жизнью, ведь при открытии новых страниц браузер обновляется, а с ним и видео перезагружается. Возможно какое-то решение есть, но к сожалению я не интересовался этим вопросом!

    [Ответить]

  26. Олег

    добрый день а как сделать так чтобы при загрузки страницы звук был выключин

    [Ответить]

    Денис Черников ответил:

    Надо подумать, сразу так не ответишь!

    [Ответить]

  27. Светослав

    Доброго, идея отличная!

    Спасибо автору за информацию!

    Один вопрос, а как сделать так, чтобы по середине видео была блямба с надписью заказать? Или купить? Щелкаешь по ней, и переходит на страницу заказа)

    [Ответить]

  28. Л

    Спасибо огромное, это то что я искала.

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

    medianovak — отличный пример использования. Очень актуально для дизайнеров, фотографов т.п.

    [Ответить]

  29. Владислав

    Идея и сами сайты классные, вот у меня к вам такой вопрос, а на соц сеть на движок vii engine получиться так же само установить или нет?)

    [Ответить]

  30. lyba

    Денис подскажите,какой код для шапки сайта чтоб видео одно и тоже крутилось на всех страницах? У меня показывает только на главной странице, сайт делаю на WordPress

    [Ответить]

  31. Макс

    Денис добрый день!

    К вам есть вопрос.

    У меня есть идея реализации данной фишки.

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

    Скажите возможно это реализовать?

    Если да, свяжитесь со мной по ящику!

    Заранее благодарю.

    [Ответить]

Оставить комментарий!

Вверх