Масштабируемый блок с видео на фоне

[pimpa]

Приветствую!

Установлен готовый шаблон на _http://www.free-solutions.net/ Под слайдер добавили фоном видео. Возможно ли добиться совпадения нижней границы слайдера и видео-фона при масштабировании? <video> перемещали в другие блоки, объединяли, пока ничего не помогает, только прописывание каждого шага через @media.

[calebelt]

Сделайте одно видео широким, скажем 2500 px, а другое по ширине слайдера, центральную часть широкого. Фоновое видео подкладываете под слайдер (position: absolute;left:50%;margin-left:-1250px;). Родительский элемент масштабируете, высота обоих видео по высоте родителя.

<roditel>
  <video fon>...</video>
  <video slider>...</video>
</roditel>

<style>
  roditel{width:100%;height:500px; и т.д.}
  [fon]{position:absolute;margin-left:-1250px;left:50%; и т.д.}
  [slider]{width:960px;margin:0 auto; и т.д.}
</style>

 

[WhatIsHTML]

Я бы сделал структуру такой :

<video src="">      
</video>
<section class=" header">
 <nav></nav>
 <div class="slider"></div>
</section>

Затем нужно сделать высоту видео и высоту блока "header" одинаковой. Хоть и стараюсь избегать такого подхода, и только в крайних случаях, если не получается через ксс, я делаю через джс.

function() {
	            $(".equal-height-columns").each(function() {
	                heights = [];
	                $(".equal-height-column", this).each(function() {
	                    $(this).removeAttr("style");
	                    heights.push($(this).height()); // write column's heights to the array
	                });
	                $(".equal-height-column", this).height(Math.max.apply(Math, heights)); //find and set max
	            });
	        }

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

[pimpa]

20 часов назад, WhatIsHTML сказал:

Я бы сделал структуру такой

Спасибо! Структуру вывела, дальше не выходит.