Привет, форумчане.
Решил я вставить видео в шапку сайта
Знаю, что так делать нельзя по ряду причин, но мне уже просто принципиально интересен данный вопрос.
Шапка у меня на всю ширину окна браузера, высота 300px
<style>
.is_overlay{ display: block; width: 100%; height: 300px; }
#trailer {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}
#trailer > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 300px;
min-width: 100%;
min-height: 300px;
width: auto;
height: auto;
}
</style>
</head>
<body>
<div id="trailer" class="is_overlay">
<video id="video" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="vid/video.mp4"></source>
<source src="vid/video.webm" type="video/webm"></source>
</video>
</div>
</body>
Видео проигрывается, но выходит за рамки div т.е. видно только верхнюю половину видео
Если сделать видео в высоту 300 px то тогда оно сохраняет пропорции (появляются полосы по бокам)
А можно ли без дополнительных выеб*нов сделать что бы видео растягивалось именно по размерам div, по которым хочет моё величество, а не браузер?
P.S. инфы я посмотрел море, но всё сводиться к тому, что я вижу верхушку видео либо с сохранением пропорций