Приветствую всех читателей — 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>. Если Вы помните, мы знакомились с ним в предыдущей статье (как сделать видеоплеер для сайта).
В этот раз он снова меня выручил.
Для начала после тега <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 стили, которые есть в архиве.
В принципе Вы можете просто скачать архив, прописать пути к своим видео файлам и радоваться готовому результату.
На сегодня это всё. До следующих постов…
С уважением, Денис Черников!
- Сравнение плагинов SEO для WordPress: Yoast SEO, Универсальное SEO (AIOSEO), Rank Math
- Введение в CMS и особенности WordPress
- Релевантный это простыми
- Роль тайного покупателя в улучшении клиентского опыта
- Обзор обновления алгоритмов Яндекса
-
Как закомментировать строку с HTML, PHP, CSS кодом?
- Теги что это такое простыми словами объяснить
- Тимбилдинг для сотрудников что это такое простыми словами
- Ebitda что это в акциях простыми словами
- Арбитраж это простыми словами
Хм идея интересная, но вот как его применить на практике, пока сообразить не могу. Посмотрел несколько примеров, меня если честно не особо впечатлили. По моему люди начинают страдать фигней, лучше бы писали качественный контент, вот это всегда было, есть и будет правильным решением!
Нужно просто совместить хороший контент с уникальным дизайном и всё будет в ажуре!
Соглашусь с Сашей! Не особо впечатляет, такая «фишка» пока что такая не нужна! Возможно в будущем… но сейчас нет. Я тоже даже и применить эту фишку никуда не могу. Но все равно спасибо за старания, Денис!
Пожалуйста! Главное, что Вы теперь знаете, как это делается и где искать!
Добрый день Денис. Идея хорошая и посмотреть приятно.Но у каждого человека есть своё мнение и вкус,что разместить у себя на блоге.
Привет, Степан!Рад что Вам понравилось. На счёт вкуса и мнения я согласен, но развиваться нужно!
Идея оригинальная с технической точки зрения, но на мой взгляд задний фон в виде видео будет отвлекать от контента на странице и рассеивать внимание читателя, по крайней мере для блога не подойдет (ИМХО)Возможно для рекламных проектов…
Ещё как подойдёт!Не обязательно отображать видеофон на всех страницах! У меня ведь слайдер только на главной крутиться! Так же и с видео можно поступить!
Если можно применять к отдельным страницам выборочно, то это другое дело! Тогда — просто отлично.А у вас, Денис где нибудь есть такая фишка?
А почему нельзя! Можно! Пока таких фишек у меня нет! Но чтобы эта фишка была отдельно нужно постараться. У многих это уже реализовано!
ООО, спасибо огромное за Ваш труд Денис! Это то, что двигает прогресс! Как раз для своей работы ищу нечто подобное, но как Вы и сказали наталкиваюсь только на платные плагины! А тут такое чудо! Главное знать куда применить и идти в ногу со временем! Еще раз благодарю!
И да прибудит с Вами трафик!
С уважением к Вашему творчеству!
Спасибо, Екатерина! Рад, что Вы оценили и уже знаете, как воспользоваться этим способом. Главное фантазия человека!
А мне нравится все что показывает Денис. Жду всегда с большим удовольствием!
Новое всем не дано понять и принять.Это логика жизни.
Спасибо, за поддержку, Владислав! Буду стараться радовать Вас и всех своих читателей различными новинками!
Сайт ив-роше как-будто не косметику рекламирует, а контрацептивы))
У всех свои асоциации!)))
Баг –>
Денис Черников Пропиши несколько тегов тегов до тех пор пока не появится ползунок справа !
Вы увидите что видео не прокручивается а остается на верху !
Руслан, спасибо за подсказку!
Попробуйте дописать position: fixed; либо в CSS, либо в самом теге видео.
Да . Вот теперь это шедевр
Видимо, что всё получилось?
Да получилось . А как сделать кнопки регулировки громкости такие :
нет=0 , тихо=40 , громко=100 ?
С ходу не подскажу, нужно смотреть и тестировать! Погуглите!
Подскажите какое разрешение видео стоит на вашем демо? У меня видео показывает в полноэкраном режиме но смещено сильно влево
Разрешение этого видео не играет роль на отображение в браузере.Оно растягивается в зависимости от монитора!
Но есть ли какие нибудь методы сделать показ видео по центу? Kрутил стили , так ничего и не получилось
Странно, оно и есть по центру! Пробуйте через дивы центрировать!
Через дивы все остается на прежнем месте , вот сам скрин http: //imageban.ru/show/2013/09/25/89940ba2357ef7030dd0767782e0780c/png
Разрешение монитора 1280×1024 4:3
У меня 1680×1050 и всё по центру! Другой комп меньше и тоже всё хорошо!
Прикольно! попробовал сделать, все получилось =)
вот еще бы сделать возможность подгрузки видео с ютуба, было бы вообще класс!
Такая возможность есть, но я не заморачивался делать!
добрый день с ютуба на фоне показывает рекламу та го некрасиво смотрится
Ну это уже не от меня зависит!))
добрый день Денис шаблон супер у меня вопрос когда я установил большой текст и начал прокручивать страницу вниз то видео фон тоже смещается как сделать что бы фон не двигался и как установить прокрутку страницы а то приходиться мышкой роликом прокручивать
Привет, Олег! Нужно в стилях прописать чтобы видео не скролисось! Я сейчас не вспомню, посмотрите в Интернете! Кто-то уже по-моему спрашивал в комментариях!
добрый день я добился своего результата нужно всего поменять в стилях
#video_background {
position: absolute;
поменять на
#video_background {
position: fixed;
Здравствуйте, Олег! Отлично, возможно это кому-нибудь тоже пригодится!
Денис, а как вставить свой видеофайл с ютюба?..
Или с другого видеохостинга? Между чем и чем вставлять в редакторе. И что вставлять?
И еще, как изменить или вставить другой текст или кнопку в окружность в центре.
И еще )
как сделать, чтобы не окружность, а прямоугольник?
У меня нет готовых решений нужно верстать скрипты!
чтобы окружность стало прямоугольником за это все отвечают стили нужно найти border-radius: 50% либо border-radius: 20px 20px 20px 20px устанавливай свои параметры и все
Денис, Вы пишете:
В принципе Вы можете просто скачать архив, прописать пути к своим видео файлам и радоваться готовому результату.
Денис, а как прописать пути к своим видеофайлам? Как вставить свой видеофайл с ютюба?..
Или с другого видеохостинга? Между чем и чем вставлять?
В первом коде вместо троек ссылки на Ваше видео с необходимым расширением! Читайте внимательнее пост! И прочитайте пост про тег < video >!
Как сделать так, чтобы поверх видео справа можно было поставить форму подписки, а слева небольшой текст?
Это не ко мне вопрос!
А к кому обращаться с вопросом по поводу отписки от комментов?)) Ссылка в письме ведет на несуществующую страницу.
Ко мне Виктор! летела просто страница, поправить некогда!
Смотрим и восхишаемся ))) http: //logistikauto.ru/page/
вобщем всё достаточно просто, было бы желание
Молодцом!)
а есть какая-нибудь команда, чтобы после заканчивания видео, переходила автоматически на другую страницу?
Вообще, что-то слышал подобное, но не искал!
Вопрос: как кодировать видео фона таблицы, отдельной строчки или столбца В разных местах страницы?
Как записать код?
Извините, но я ничего из сказанного не понял!
Спасибо за быструю реакцию.
Как сделать видео — фон таблицы или разных таблиц на одной странице сайта с помощью HTML5?
Моя попытка на сайте http ://porog.at.ua/index/0-103 не удалась.
Капли дождя на стекле окна есть, но под таблицей, а не в таблице.
И, как вставить аудио с автозапуском на открывание страницы без изображения плеера?
Извините, а с другие типы видео файлов можно открывать в HTML5, например AVI в виде фона?
Спасибо за ваши комментарии.
Вам нужно бэкграунд (фон) задать видео! Посмотрите в коде в моём, как это реализовано!
А всё остальное само будет сверху ложится! Автозапуск аудио есть, но я не могу всё запомнить, в Интернете есть куча с татей на тему автозапуска звука на странице, но это только раздражает посетителей!
Что же касается форматов то для html5 они стандартные!
Уважаемый Денис, где разместить тег video бэкграунд (фон) применительно к , — внутри, за ним, спереди или
Андрей, откройте демо пример и посмотрите исходный код!
Скажите пож. Денис, согласно вашей разработке делаю вставку аналогично для видео фона после тега , но почему то, сначала располагается видео фон, а под ним уже идёт контент. А должно быть контент на видео фоне. В чём проблема?
Андрей, проблема в наложении слоёв Z-index! Забейте Z-index в Интернете, там куча с татей на эту тему!
Вы знаете, Денис, ставлю плюсовой z- индекс, закрывает полностью текст, ставлю минусовой, где то под низом болтается.
Как привязать видео фон к конкретной таблице с текстом. Например, беру таблицу, и в ней кодирую видео фон. Как это правильно записать? Какую роль может играет ?, если есть ?
Делаю по вашему исходнику, текст располагается выше таблицы, или ниже таблицы, но никак не совместно.
Андрей, обратитесь за деньги к фрилансеру!
Спасибо за совет
Привет.
Ты мужик, Денис, в самом хорошем и правильном смысле этого слова!
Спасибо тебе огромное!
Привет, пожалуйста!
Оцените пожалуйста еще один сайт с видеофоном – сайт «Живая Удмуртия» – http: //liveudm.ru/ не напрягает ли посетителей? Важно объективное мнение. Спасибо
Если честно, меня напрягло!
Ничего не получилось, мое видео не возпроизводится, почему? ПОЖАЛУЙСТА ПОМОГИТЕ!
Как я могу помочь? В статье рабочий пример, всё работает!
Добился видео вместо фона в шапке сайта. Расположил тег … сразу за тегом боди. Но это не по правилам.
Играет роль изначальная архитектура сайта. Если движок сайта построен на дивах, то наверняка существует перекрытие по z-индексам и в плоскости, это определяет видимость вашего фона.
По поводу ютуба. Я так и сделал. Указал адрес ролика, правда с другого сайта и он благополучно крутился. Но, там решили ролик снять, я и присох.
Так что вывод: разобраться как ложиться поток информации на страницу по правилам HTML и CSS и вы непобедимы.
На пример, ваш браузер способен работать с HTML5? Или ваш сайт статический или динамический? Архитектура сайта табличная(самая простая без CSS) или на дивах?
Кстати,все свойства CSS вы запросто можете внедрить непосредственно персонально в одной стоке или даже части строки. Это очень выгодно при маленьких сайтах в несколько страниц используя выражение style.
Все теги можете посмотреть в браузере Google в расширении «HTML Справочникe» http: //chrome-extension://igokaaaooaoflibhomenoakijkgnmbbb/htmlbook.html
Если у вас получиться, создавайте видео фон начиная от строки до ячейки, таблицы или целого сайта.
И последнее, шапка моего сайта выводилась с видео картинкой в поиске. А это супер, сразу идут посетители.
Всем удачи!
Добрый день Денис!
Не подскажите как наложить фильтр с затемнением на видео или на страницу с видео ? Видео у меня светлое и плохо видны шрифты.
Спасибо!
Здравствуйте, Андрей!
Попробуйте через стили задать фон, как у меня на блоге полоска снизу, ей можно задавать прозрачность!
Классная вещь, спасибо
Я рад что понравилось, пожалуйста!
Доброго времени суток уважаемый, Денис! идея — шикарна! мне очень понравилась, ещё больше понравилось,когда всё увидел в действии! Скачал твой скрипт, всё работает, сразу видно опытный человек делал. Единственное, если тебя не затруднит, научи,как можно сделать так же но только для много страничного сайта, хочется что бы видео на фоне не воспроизводилось заново,а просто жило своей жизнью:-) заранее огромное СПАСИБО!!!
Здравствуйте, Павел!Видео не сможет жить своей жизнью, ведь при открытии новых страниц браузер обновляется, а с ним и видео перезагружается. Возможно какое-то решение есть, но к сожалению я не интересовался этим вопросом!
добрый день а как сделать так чтобы при загрузки страницы звук был выключин
Надо подумать, сразу так не ответишь!
Доброго, идея отличная!
Спасибо автору за информацию!
Один вопрос, а как сделать так, чтобы по середине видео была блямба с надписью заказать? Или купить? Щелкаешь по ней, и переходит на страницу заказа)
Спасибо огромное, это то что я искала.
По поводу как использовать и что это не актуально… посмотрите на гугл хэнгоут. дизайн именно с видео в бэграунде.
medianovak — отличный пример использования. Очень актуально для дизайнеров, фотографов т.п.
Идея и сами сайты классные, вот у меня к вам такой вопрос, а на соц сеть на движок vii engine получиться так же само установить или нет?)
Денис подскажите,какой код для шапки сайта чтоб видео одно и тоже крутилось на всех страницах? У меня показывает только на главной странице, сайт делаю на WordPress
Денис добрый день!
К вам есть вопрос.
У меня есть идея реализации данной фишки.
Она такая: есть фрейм, в котором будет отображаться видео-ролик фоном со звуком, спереди в углу будет размещен текст под тематику видео. После того как ролик проигрался, появляется кнопка продолжить, и горизонтальный фрейм меняется на другой ролик-фон с текстом и так несколько раз шагами со сменой роликов.
Скажите возможно это реализовать?
Если да, свяжитесь со мной по ящику!
Заранее благодарю.
Приветствую всех читателей — Sozdaiblog.ru! В этом посте мы поговорим о том, как установить видео...
Приветствую всех читателей — Sozdaiblog.ru! В этом посте мы поговорим о том, как установить видео...
Приветствую всех читателей — Sozdaiblog.ru! В этом посте мы поговорим о том, как установить видео...
Приветствую всех читателей — Sozdaiblog.ru! В этом посте мы поговорим о том, как установить видео...
Приветствую всех читателей — Sozdaiblog.ru! В этом посте мы поговорим о том, как установить видео...
Приветствую всех читателей — Sozdaiblog.ru! В этом посте мы поговорим о том, как установить видео...
Приветствую всех читателей — Sozdaiblog.ru! В этом посте мы поговорим о том, как установить видео...
Приветствую всех читателей — Sozdaiblog.ru! В этом посте мы поговорим о том, как установить видео...
Приветствую всех читателей — Sozdaiblog.ru! В этом посте мы поговорим о том, как установить видео...
Приветствую всех читателей — Sozdaiblog.ru! В этом посте мы поговорим о том, как установить видео...
Что будем искать? Например,Кредит