У меня есть макет, который использует бутстрап 3. Что-то вроде кода ниже. Я хочу создать эффект видео фона за контейнером. Как показано в этом JSFiddle. Однако по какой-то причине видео появляется перед текстом, несмотря на то, что я установил z-index, чтобы это произошло. Что я должен изменить, чтобы заставить видео сидеть в фоновом режиме? Вы можете увидеть это, если вы измените размер видео, чтобы текст появился над ним.На весь экран Видео за загрузочным контейнером

<div class="homepage-hero-module fullheight"> 
    <div class="video-container"> 
     <div class="title-container"> 
      <div class="headline"> 
       <h1>Welcome to our Company</h1> 
      </div> 
      <div class="description"> 
       <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div> 
      </div> 
     </div> 
     <div class="filter"></div> 
     <video autoplay loop class="fillWidth"> 
      <source src="http://dfcb.github.io/BigVideo.js/vids/dock.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.</video> 
     <div class="poster hidden"> 
      <img src="http://www.videojs.com/img/poster.jpg" alt=""> 
     </div> 
    </div> 
</div>

Благодаря

EDIT:

Не знаю почему, но на моем маленьком компьютере, видео на JSFIddle не показывает, я просто получить белый текст на черном фоне, в то время как на моем большой imac, я получаю видео поверх текста.

источник

2016-01-17 George Edwards

Вы должны добавить соответствующий CSS, а также предоставить рабочий пример с помощью фрагмента кода JSFiddle или Embeded SO Code, чтобы показать проблему. –

@ Zeratops В вопросе есть ссылка на JSfiddle, показывая проблему. Не включил css, так как есть довольно много, и это на JSFiddle –

Вот мой код, который я использовал для видео фона.

HTML:

<body> 
    <video autoplay loop poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid"> 
     <source src="//demosthenes.info/assets/videos/polina.webm" type="video/webm"> 
     <source src="//demosthenes.info/assets/videos/polina.mp4" type="video/mp4"> 
     <object> 
      <embed src="//demosthenes.info/assets/videos/polina.webm" type="video/webm" allowfullscreen="true" allowscriptaccess="always" /> 
     </object> 
    </video> 
    <div> 
    <h4>Content</h4> 
    </div> 
</body>

CSS:

video { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -o-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat; 
    background-size: cover; 
    -moz-transition: 1s opacity; 
    -o-transition: 1s opacity; 
    -webkit-transition: 1s opacity; 
    transition: 1s opacity; 
} 

h4{ 
    font-size: 50px; 
    color: red; 
}

Работа скрипку:

JSfiddle

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

источник

2016-01-17 20:26:43

Спасибо! Не совсем то, что мне нужно, поскольку я хочу, чтобы видео соответствовало загрузочной загрузке 'container-fluid' и содержало контент ниже, чтобы вы могли прокручивать страницу. Не понимаю, что не так с моим кодом? –

На весь экран Видео за загрузочным контейнером

EDIT:

ответ

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