1

Здравствуйте.

Вот решил установить видео вместо фона.
Все вроде нормально, но проблема в том, что при сжатии размера окна браузера видео обрезается слева направо.

Можно ли как-то сделать так, чтобы обрезка шла по обеим краям, т.е. был виден центр видео?
Вот пример для демонстрации: Установка видео для фона сайта с помощью HTML5 | rudebox.org.ua

Заранее спасибо.

4 ответа 4

3

Может быть, вам подойдет такой вариант (ссылка):

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 и демонстрация его работы.

1
  • Спасибо большое за ответ, но это не то что хотел. Планируется, чтобы видео было в качестве фона и был растянут на всю ширину экрана. Вот как вот тут - 5minutemarketing.leadpages.net/experience. Если поиграться с разрешением экрана, то видео красиво подстраивается.
    – murad30
    23 ноя 2014 в 17:12
0

Посмотреть пример

1
0

Можно вычислять ширину браузера и добавлять к видео отрицательный margin-left, который равен половине разности между размером окна браузера и размером видео. А при ресайзе пересчитывать формулу. Вот пример с шириной видео 864px.

Если ширина браузера больше этой ширины, то видео показывается в обычном варианте.

UPD. Посмотрел тот пример, что вы дали к первому ответу, они вместо margin-left используют просто left, можете попробовать, формула в принципе та же.

0

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

onload="leadPagesOnLoadFn();"

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.