Как создать веб-сайт, используя видео с YouTube в качестве фона?

[constnw88]

Я использовал: www.seanmccambridge.com/tubular/ простая и неприхотливая библиотека.

[snikes]

неплохо, мне понравилось

[fortunato]

еще есть такой плагин для videojs — github.com/matthojo/videojs-Background

[selenite]

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

[Halt]

А когда-то смеялись над картинками в bmp…

[dennis777]

В Яндексе так не считают. Задолбали со своими обложками под каждым вторым сервисом.

[marcus]

Доброго вечера, selenite!

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

Не могли бы сказать свое мнение, например, об этих двух сайтах? Как они вам? Они медийные и грузятся быстро. Уместно ли видео в таких случаях?

urbaninfluence.com
www.goxd.com

[shuron]

Тема просто просит напомнить о www.ruszen.ru/ ;)

[rhamdeew]

У разных сайтов разные цели. Есть информационные ресурсы где важен именно контент (например тот же Хабр), а есть призванные вызвать вау-эффект у посетителей и задать нужную атмосферу.

С такой логикой кинофильмы также не должны обладать трейлерами, хватит простой текстовой аннотации.

[artishok]

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

[Lungo]

У меня на вашем демо сайте видео не запустилось автоматически, а кнопку Play нажать нельзя.
Firefox 35.0.1
Linux Mint

[Evgeny42]

Тот же браузер, пять минут прождал, у меня как был серый фон, так и остался.

[ZoomLS]

Firefox 35 — тоже ничего не работает.

[rhamdeew]

Тот же FF 35.0.1, Fedora 21
Все загрузилось, все работает.

[IvanTheCrazy]

Да ладно, там же куча тем, у которых в фичах написано «Video Background»

[iamitbeard]

На Айфоне демо не работает.

[eta4ever]

Так, а теперь давайте краткую инструкцию, как такое бесчеловечное явление автоблокировать.

[shimapa23]

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

[snikes]

не туда написал, я.

[skomoroh]

мечта: кто-бы написал плагин для блокировки фоновых видео…

или самому написать ^-^

[UksusoFF]

NoScript разве этого не позволяет?

[snikes]

Грузит ЦП, не всегда открывается

[moooV]

Бешено тормозит, слайд шоу просто — аж мышь рывками двигается, еле смог вкладку закрыть. Само собой, загрузка процессора 100%.
О прокрутке вниз в данном случае не может быть и речи.

[snikes]

решение в первом комментарии. Без тормозов. Хотя надо проверить на телефоне )

[bO_oblik]

Ребята, а подскажите возможно-ли видеострим в качестве фона подключить?

[Glebcha]

Можно, но не нужно.
Если считаете, что ваши пользователи должны страдать, то вот неплохое решение (не для этого созданное конечно же, но исполняющее сию прихоть).

[bO_oblik]

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

[fortunato]

к этому плееру videojs есть плагин для создания фонового видео github.com/matthojo/videojs-Background
думаю тоже как вариант если видео на вашем хостинге

[AgentSmith]

Кажется, кое-кто забывает, что есть ещё очень много мест на планете, где интернет не только слабый, но ещё и платный

[Apathetic]

Вы, в свою очередь, забываете, что сайты (особенно в наше время, особенно промо-сайты, особенно всякие лендинги и прочие площадки, на которых уместны подобные фокусы) не делаются для всех подряд. Таргетинг-шмаргетинг, все дела.

[summeroff]

Если бы только промо. У того же airbnb сайт перегружен напрочь, хотя они вроде как сервис для путешествующих людей у которых интернет описывается словами мало, медленно и дорого.

[Apathetic]

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

[snikes]

Если делать, то я бы выбрал фон на подобии, как в Яндекс браузере, с движением по 2-5 сек, но нужно продумать вывод, плеер использовать явно тяжеловато будет.

[paranoik]

Только не это… Теперь еще больше сайтов будут крутить видео в фоне на главной ((

[bogolt]

Реквестирую статью «Как заблокировать YouTube контент идущий в качестве фона на необходимом вам сайте».

[seleko]

Отчасти поэтому у меня стоит расширение RequestPolicy :)

[xoxulin]

Блок div.pattern стробит при прокрутке. Как по мне, лучше сменять в background-е с анимацией ресурсы, чтобы не так грузило проц и по сети тащило меньше: pan-n-zoom + fade-in-out.

[Suvitruf]

Руки бы отрубал создателям таких сайтов, когда на 10 килобайт контента мегабайты мусора.

[constnw88]

При чем тут создатели? Претензии заказчикам.

[Suvitruf]

Я от подобных заказов отказывался, когда работал фрилансером. Понятно, что «кушать хочется», но и у разработчика должны быть собственные принципы.

[seleko]

Скорее всего заказчик-бы не понял даже, если-бы там просто была двигающаяся картинка… Типа камера по панораме…

[constnw88]

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

[Siorinex]

Заказчикам надо объяснять в простых словах основы дизайна, а если не поймут — посылать такого заказчика на...!
И ставить ему минусы в рейтингах, если это возможно в системе: вот из-за таких моральных уродов, берущихся за такое Г… весь мир страдает из-за спама, телефонных обзвонов и н#$ебически тормозящих сайтов!

[Siorinex]

Принципиальное НЕТ! Не переношу, когда открываешь страничку, и тут-же без предупреждения начинает играть музыка и идти видео!
1. Загрузка большого объёма контента должна быть ТОЛЬКО по разрешению пользователя! В принципе! Хотя-бы до момента, когда мобильный интернет не станет безлимитным без всяких роумингов и «только до… мегов на нормальной скорости»!
2. Финтифлюшечки не должны быть по объёму больше, чем полезная инфа на сайте! Знаете как бесит сайт, на котором из полезной инфы — дай бог только контакты, при этом до ж… ы флешовых извратов, что какая-нить снежинка падает с таким ДПС, что если тот ещё чуть упадёт — и она начнёт ВЗЛЕТАТЬ??!
3. Видео в фоне — тупо вредно! В итоге невменяемый фон, на котором плохо виден текст, видео нормально не видно из-за верхних слоёв, и в целом всё друг от друга отвлекает!

[Delias]

В демо ещё и реклама в фоновом видео появилась :)

[devcor]

А почему бы не использовать .webm?
У меня в блоге вместо шапки-картинки к посту проигрывается 15 секунд loop видео. Размер — килобайт по 200. И всё это без музыки, при том затенённое. Выглядит неплохо, да и не мешает совсем, а от контента (текста) не отвлекает совершенно, так как он под всем этим делом находится.

[shimapa23]

Покажите, пожалуйста.

[devcor]

briefly.silentforest.eu/the-long-dark-early-access/

Вот, пожалуйста. Размер .webm в шапке — 168кб.

[shimapa23]

У меня не проигрывается видео (OS X Yosemite, Safari 8.0.3)

[devcor]

Хм. Вот тут однозначного ответа дать не могу, т.к. не смотрел в сторону совместимости ещё даже. В опере и хроме — проигрывается. Возможно, не все браузеры держат этот формат? Я не уверен.

[devcor]

Вот, что прочитал в википедии:

Финальные версии браузеров, в которых включена поддержка формата WebM:

Google Chrome 6
Chromium
Mozilla Firefox 4
Opera 10.60
Также, формат будет поддерживаться Internet Explorer 9 при установке нужных кодеков в Windows

[shimapa23]

Да действительно, в Chrome работает