Блог

Главная - Вопросы по программированию - Фоновое видео в HTML5 не масштабируется

Фоновое видео в HTML5 не масштабируется

#css #html

#css #HTML

Вопрос:

Я пытаюсь масштабировать видео в окне браузера и по-прежнему охватывать всю область, но не могу этого добиться. Кто-нибудь знает, почему мой текущий метод не работает?

HTML: 

 <div class="bgVideoWrap">
<video id="bgVideo" loop="true" autoplay="true" >
    <source src="video/bgVideos/Speak_BG.webm" type="video/webm"></source>
</video>
</div>

CSS:

 #bgVideo {
    height: auto;
    width: auto;
    min-width: 100%;
    min-height: 100%;
}

.bgVideoWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff0000;
    z-index: -1000;
    overflow: hidden;
}

html, body  {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 1;
}

Комментарии:

1. вы пробовали использовать background:cover; ?

2. также исследуйте это dfcb.github.io/BigVideo.js

3. размер фона: 100% также будет работать

4. Ну, проблема в том, что технически это не фон. Это видео, которое притворяется фоном, поэтому на него не будет влиять свойство CSS background.

Ответ №1:

-ДЕМОНСТРАЦИЯ-

Установите background-size: cover; значение .bgVideoWrap и opacity: 0.6; #bgVideo

РАЗМЕТКА:

 <div class=bgVideoWrap>
<video id=bgVideo loop autoplay poster=http://media.w3.org/2010/05/bunny/poster.png>
    <source src=http://media.w3.org/2010/05/bunny/movie.mp4 type=video/mp4>
    <source src=http://media.w3.org/2010/05/sintel/trailer.ogv type=video/ogg>
     <p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>

Стиль:

 html, body  {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 1;
}

#bgVideo {
    height: auto;
    width: auto;
    opacity: 0.6;    /*Set opacity*/
    min-width: 100%;
    min-height: 100%;
}
.bgVideoWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    overflow: hidden;
    background: #333 url("http://aimg.disneystore.com/content/ds/skyway/2012/category/full/cp_FWB_Brave_20120926.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

введите описание изображения здесь

Комментарии:

1. Да, это работает для изображения, но не работает для видео внутри элемента .bgVideoWrap.

2. проверьте, работает ли обновление, и добавьте attr poster к вашему видео

3. Это полезно, но я не могу заставить его функционировать на моем сайте, даже скопировав и вставив код. Где-то еще должна быть ошибка. Это то, что я ищу в jsfiddle.

4. Не могли бы вы опубликовать ссылку на свой сайт, пожалуйста, может быть, у вас есть что-то, что перезаписывает стиль видео

5. alpha.oddmachine.com/work.php Это страница, с которой у меня возникли проблемы. Не обращайте внимания на «Bodum».