Bootstrap Video Background Not Responsive (Not Scaling)

Я пытаюсь использовать бутстрап, чтобы сделать мой личный сайт с видео в фоновом режиме. Когда я уменьшаю окно браузера, видеозапись, заполнитель заголовка и кнопки не масштабируются (не реагируют). Я не знаю, что случилось. Любая помощь будет полезна. Спасибо!Bootstrap Video Background Not Responsive (Not Scaling)

Вот мой HTML код:

<div class = "header-container"> 
     <div class = "video-container"> 
       <video preload = "true" autoplay loop volume = "0"> 
       <source src = "videos/main.mp4" type = "video/mp4" > 
       </video> 
     </div> 
     <h3 class="main"> 
      Title Placeholder 
       <div class="col-md-5 text-center col-sm-offset-3"> 
         <a href="#services" class="btn btn-lg outline col-sm-offset-2">Services</a> 
         <a href="#about" class="btn btn-lg">About</a> 
         <a href="#contact" class="btn btn-primary btn-lg outline">Contact</a> 
       </div> 
     </h3> 
    </div>

Вот мой CSS код:

.header-container { 
    width: 100%; 
    height: 700px; 
    border-left: none; 
    border-right: none; 
    position: absolute; 
    padding: 10px; 
    overflow: hidden; 
} 

.video-container { 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    height: 700px; 
    width: 100%; 
    overflow: hidden; 
}

источник

2015-12-15 Harold Finch

Можете ли вы создать скрипку ?? –

@SunilGehlot Я не уверен, что означает создание скрипки? –

Возможный дубликат [Bootstrap 3 - Отзывчивый mp4-видео] (http://stackoverflow.com/questions/26040136/bootstrap-3-responsive-mp4-video) – NeosFox

пытаются добавить в стиле

h3.main 
{ 
position:relative; 
z-index:1; 
} 
video 
{ 
width:100%; 
}

источник

2015-12-15 07:11:08

Видео реагирует, но текст и кнопки, к сожалению, –

ваш текст и кнопка уже в центре и не реагируют на то, что вы хотите –

Текст и кнопка не реагируют , Это выглядит так: http://imgur.com/a/yWWdl –

Хорошо вы даете .video-container статическую высоту. Сделайте его высотой до 100%. После этого возьмите свой элемент video и дайте ему min-width и max-width100%. Йо также может потребоваться добавить max-width собственности на video и установить его на 100%. Вы также можете использовать width и height из 100% вместо использования min-width и min-height. Посмотрите, что работает и создайте скрипку.

.video-container { 
 
    position: absolute; 
 
    top: 0%; 
 
    left: 0%; 
 
    height: 700px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
video { max-width: 100%; min-width: 100%; min-height: 100%; }

источник

2015-12-15 07:26:43

Bootstrap Video Background Not Responsive (Not Scaling)

ответ

Смежные вопросы