Здравствуйте.
Вот решил установить видео вместо фона.
Все вроде нормально, но проблема в том, что при сжатии размера окна браузера видео обрезается слева направо.
Можно ли как-то сделать так, чтобы обрезка шла по обеим краям, т.е. был виден центр видео?
Вот пример для демонстрации: Установка видео для фона сайта с помощью HTML5 | rudebox.org.ua
Заранее спасибо.
Может быть, вам подойдет такой вариант (ссылка):
html:
<div id="videoContainer">
<video autoplay="" loop="" poster="https://dl.dropboxusercontent.com/u/23834858/videos/bck.jpg">
<source src="https://dl.dropboxusercontent.com/u/23834858/videos/WD0221.mp4.mp4" type="video/mp4">
<source src="https://dl.dropboxusercontent.com/u/23834858/videos/WD0221.webmsd.webm" type="video/webm">
</video>
</div>
CSS
.videoContainer {
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
video {
width: 100%;
height: auto;
max-height: 100%;
}
Кажется, неплохо масштабируется, впрочем, навено, есть варианты и получше. Мне тоже было бы интересно о них узнать. Сайты с видео обычно выглядят прикольнее. :)
P.S. Вот тут есть интересный пример с использованием JavaScript и демонстрация его работы.