Sozdaiblog.ru
Главная / CSS, JQuery, JavaScript
Назад

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

Опубликовано: 29.03.2013
Время на чтение: 18 мин
80
499

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

Приветствую всех читателей — 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 стили, которые есть в архиве.

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

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

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

Сайт
Поделиться
Похожие записи
Комментарии:
  • Александр Красильный
    Опубликовано: 28.04.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 28.04.2013 Ответить на сообщение

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

  • Томский школьник
    Опубликовано: 28.04.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 28.04.2013 Ответить на сообщение

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

  • Степан
    Опубликовано: 28.04.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 28.04.2013 Ответить на сообщение

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

  • Людмила
    Опубликовано: 28.04.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 28.04.2013 Ответить на сообщение

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

      • Людмила
        Опубликовано: 28.04.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 28.04.2013 Ответить на сообщение

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

  • Катерина
    Опубликовано: 28.04.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 28.04.2013 Ответить на сообщение

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

      • Влад
        Опубликовано: 14.05.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 14.05.2013 Ответить на сообщение

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

  • Виктор
    Опубликовано: 28.04.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 28.04.2013 Ответить на сообщение

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

  • Ruslan Abramov
    Опубликовано: 09.09.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 09.09.2013 Ответить на сообщение

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

      • Ruslan Abramov
        Опубликовано: 11.09.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 11.09.2013 Ответить на сообщение

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

          • Ruslan Abramov
            Опубликовано: 13.09.2013 Ответить на сообщение

            Да получилось . А как сделать кнопки регулировки громкости такие :
            нет=0 , тихо=40 , громко=100 ?

          • Денис Черников
            Опубликовано: 13.09.2013 Ответить на сообщение

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

  • war100ck
    Опубликовано: 25.09.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 25.09.2013 Ответить на сообщение

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

      • war100ck
        Опубликовано: 25.09.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 25.09.2013 Ответить на сообщение

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

          • war100ck
            Опубликовано: 25.09.2013 Ответить на сообщение

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

          • Денис Черников
            Опубликовано: 25.09.2013 Ответить на сообщение

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

  • Евгений
    Опубликовано: 06.02.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 06.02.2014 Ответить на сообщение

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

      • олег
        Опубликовано: 28.10.2014 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 29.10.2014 Ответить на сообщение

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

          • олег
            Опубликовано: 28.10.2014 Ответить на сообщение

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

          • Денис Черников
            Опубликовано: 29.10.2014 Ответить на сообщение

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

          • олег
            Опубликовано: 05.11.2014 Ответить на сообщение

            добрый день я добился своего результата нужно всего поменять в стилях
            #video_background {
            position: absolute;
            поменять на
            #video_background {
            position: fixed;

          • Денис Черников
            Опубликовано: 05.11.2014 Ответить на сообщение

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

  • Нургаян
    Опубликовано: 12.02.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 12.02.2014 Ответить на сообщение

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

      • олег
        Опубликовано: 12.12.2015 Ответить на сообщение

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

  • Нургаян
    Опубликовано: 12.02.2014 Ответить на сообщение

    Денис, Вы пишете:
    В принципе Вы можете просто скачать архив, прописать пути к своим видео файлам и радоваться готовому результату.
    Денис, а как прописать пути к своим видеофайлам? Как вставить свой видеофайл с ютюба?..
    Или с другого видеохостинга? Между чем и чем вставлять?

    • Денис Черников
      Опубликовано: 12.02.2014 Ответить на сообщение

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

  • Булат
    Опубликовано: 13.03.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 16.03.2014 Ответить на сообщение

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

  • Виктор
    Опубликовано: 16.03.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 18.03.2014 Ответить на сообщение

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

  • Евгений
    Опубликовано: 16.03.2014 Ответить на сообщение

    Смотрим и восхишаемся ))) http: //logistikauto.ru/page/
    вобщем всё достаточно просто, было бы желание

    • Денис Черников
      Опубликовано: 18.03.2014 Ответить на сообщение

      Молодцом!)

  • C-Max
    Опубликовано: 17.03.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 18.03.2014 Ответить на сообщение

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

  • Андрей
    Опубликовано: 27.03.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 28.03.2014 Ответить на сообщение

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

      • Андрей
        Опубликовано: 28.03.2014 Ответить на сообщение

        Спасибо за быструю реакцию.
        Как сделать видео — фон таблицы или разных таблиц на одной странице сайта с помощью HTML5?
        Моя попытка на сайте http ://porog.at.ua/index/0-103 не удалась.
        Капли дождя на стекле окна есть, но под таблицей, а не в таблице.
        И, как вставить аудио с автозапуском на открывание страницы без изображения плеера?
        Извините, а с другие типы видео файлов можно открывать в HTML5, например AVI в виде фона?
        Спасибо за ваши комментарии.

        • Денис Черников
          Опубликовано: 28.03.2014 Ответить на сообщение

          Вам нужно бэкграунд (фон) задать видео! Посмотрите в коде в моём, как это реализовано!
          А всё остальное само будет сверху ложится! Автозапуск аудио есть, но я не могу всё запомнить, в Интернете есть куча с татей на тему автозапуска звука на странице, но это только раздражает посетителей!
          Что же касается форматов то для html5 они стандартные!

          • Андрей
            Опубликовано: 28.03.2014 Ответить на сообщение

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

            Денис Черников
            Опубликовано: 28.03.2014 Ответить на сообщение

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

          • Андрей
            Опубликовано: 29.03.2014 Ответить на сообщение

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

            • Денис Черников
              Опубликовано: 29.03.2014 Ответить на сообщение

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

              • Андрей
                Опубликовано: 30.03.2014 Ответить на сообщение

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

                • Денис Черников
                  Опубликовано: 30.03.2014 Ответить на сообщение

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

          • Андрей
            Опубликовано: 30.03.2014 Ответить на сообщение

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

          • Андрей
            Опубликовано: 08.04.2014 Ответить на сообщение

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

            • Денис Черников
              Опубликовано: 08.04.2014 Ответить на сообщение

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

          • Владимир
            Опубликовано: 29.05.2014 Ответить на сообщение

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

            • Денис Черников
              Опубликовано: 29.05.2014 Ответить на сообщение

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

          • Anton
            Опубликовано: 31.08.2014 Ответить на сообщение

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

            • Денис Черников
              Опубликовано: 03.09.2014 Ответить на сообщение

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

          • Андрей
            Опубликовано: 03.09.2014 Ответить на сообщение

            Добился видео вместо фона в шапке сайта. Расположил тег ... сразу за тегом боди. Но это не по правилам.
            Играет роль изначальная архитектура сайта. Если движок сайта построен на дивах, то наверняка существует перекрытие по z-индексам и в плоскости, это определяет видимость вашего фона.
            По поводу ютуба. Я так и сделал. Указал адрес ролика, правда с другого сайта и он благополучно крутился. Но, там решили ролик снять, я и присох.
            Так что вывод: разобраться как ложиться поток информации на страницу по правилам HTML и CSS и вы непобедимы.
            На пример, ваш браузер способен работать с HTML5? Или ваш сайт статический или динамический? Архитектура сайта табличная(самая простая без CSS) или на дивах?
            Кстати,все свойства CSS вы запросто можете внедрить непосредственно персонально в одной стоке или даже части строки. Это очень выгодно при маленьких сайтах в несколько страниц используя выражение style.
            Все теги можете посмотреть в браузере Google в расширении «HTML Справочникe» http: //chrome-extension://igokaaaooaoflibhomenoakijkgnmbbb/htmlbook.html
            Если у вас получиться, создавайте видео фон начиная от строки до ячейки, таблицы или целого сайта.
            И последнее, шапка моего сайта выводилась с видео картинкой в поиске. А это супер, сразу идут посетители.
            Всем удачи!

          • Андреу
            Опубликовано: 21.09.2014 Ответить на сообщение

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

            • Денис Черников
              Опубликовано: 22.09.2014 Ответить на сообщение

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

          • Кристина
            Опубликовано: 05.12.2014 Ответить на сообщение

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

            • Денис Черников
              Опубликовано: 08.12.2014 Ответить на сообщение

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

          • Павел
            Опубликовано: 13.12.2014 Ответить на сообщение

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

            • Денис Черников
              Опубликовано: 15.12.2014 Ответить на сообщение

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

          • Олег
            Опубликовано: 28.02.2015 Ответить на сообщение

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

            • Денис Черников
              Опубликовано: 11.03.2015 Ответить на сообщение

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

          • Светослав
            Опубликовано: 14.06.2015 Ответить на сообщение

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

          • Л
            Опубликовано: 28.07.2015 Ответить на сообщение

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

          • Владислав
            Опубликовано: 27.01.2016 Ответить на сообщение

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

          • lyba
            Опубликовано: 28.01.2016 Ответить на сообщение

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

          • Макс
            Опубликовано: 09.02.2016 Ответить на сообщение

            Денис добрый день!
            К вам есть вопрос.
            У меня есть идея реализации данной фишки.
            Она такая: есть фрейм, в котором будет отображаться видео-ролик фоном со звуком, спереди в углу будет размещен текст под тематику видео. После того как ролик проигрался, появляется кнопка продолжить, и горизонтальный фрейм меняется на другой ролик-фон с текстом и так несколько раз шагами со сменой роликов.
            Скажите возможно это реализовать?
            Если да, свяжитесь со мной по ящику!
            Заранее благодарю.

            • Имя
            Укажите своё имя и фамилию
            E-mail
            Без СПАМа, обещаем
            Текст сообщения
            Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.

            Sozdaiblog.ru
            Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами.