Видео на сайт (фон), резиновое по ширине, но заданной высоты

@BiOpSIhoS · Регистрация: 07.09.2012

Студворк — интернет-сервис помощи студентам

Доброго всем вечера.
Есть див (header), заданной высоты, и 100% по ширине. Надо в него на фон поставить видюшку.

Попробовал вот такой вариант

HTML5
1
2
3
4
<video autoplay loop poster="polina.jpg" id="bgvid">
    <source src="vids/12.webm" type="video/webm">
    <source src="vids/12.mp4" type="video/mp4">
</video>

и к нему стили

CSS
1
2
3
4
5
6
7
8
9
right: 0;
top: 0;
width: 1273px;
max-width: 100%;
height: 518px;
z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
position: absolute !important;

работает конечно. Пример работы этого способа Но не то, что надо! =( при загрузке страницы видео оказывается над контентом, если (например) тыкнуть в "посмотреть код элемента", то контент появляется над видео и отображается как надо, при обновлении страницы все повторяется.

Попробовал вот такой чудесный скрипт:http://dfcb.github.io/BigVideo.js/

демка скрипта: http://dfcb.github.io/BigVideo... -loop.html

На сранице примера видюха отображается в заданной области, не на всю высоту страницы, когда ставлю скрипт себе, то у меня видюха растягивается на всю высоту. (ну, точнее, на height:100%)

Подскажите кто-нибудь скриптик, чтоб видео в заданном блоке отображалось корректно. Или как настроить этот скрипт, что я указал выше (скриптик то на самом деле отличный) ?
Или скажите, что не так в моем случае? почему видео постоянно подгружается над контентом?

@BigVan · 18.02.2014, 18:55

Как альтернативный вариант, использовать gif анимацию, подгружается как обычная картинка.

@BiOpSIhoS · 18.02.2014, 23:37 **[ТС]**

Не не, гиф как то не вариант.
Этот скрипт работает корректно(хром, огнелис, и даже ие8. в опере правда не подцепилась видюха mp4), просто я со стилями перемудрил не слабо так. =)

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@BigVan 20 / 20 / 15 Регистрация: 16.02.2014 Сообщений: 73
	18.02.2014, 18:55
	Как альтернативный вариант, использовать gif анимацию, подгружается как обычная картинка. 0

@BiOpSIhoS 23 / 23 / 7 Регистрация: 07.09.2012 Сообщений: 71
	18.02.2014, 23:37 [ТС]
	Не не, гиф как то не вариант. Этот скрипт работает корректно(хром, огнелис, и даже ие8. в опере правда не подцепилась видюха mp4), просто я со стилями перемудрил не слабо так. =) 0

Опции темы