YT Player Фоновое изображение

Question

Так что в настоящее время используется скрипт для скриптов youtube pupunzi для фона DIV и все работает отлично, но для загрузки видео требуется секунда или два, тем временем мне хотелось бы, чтобы изображение отображалось в фоновом режиме, пробовал делать это с Z-значением и другим позиционированием, но может только когда-либо получить его перед видео! Таким образом, по существу, хотите изображение, чтобы заменить серый цвет, который существует в настоящее время, как и в текущем сценарии серый фактически накладка ..

Веб-адрес: http://www.littlemountainmedia.uk

HTML в вопросе:

<section class="content-section video-section"> 
<div class="pattern-overlay"> 
     <a id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/A3PDXmYoF5U',containment:'.video-section', startAt:4, quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a> 
     <div class="container"> 
      <div class="row"> 
      <div class="col-lg-12"> 
       <h2>Welcome to Little Mountain Media</h2> 
       <h1>WE BELIEVE IN THE POWER OF VISUAL MEDIA</h1> 
      </div> 
      </div> 
     </div> 
    </div> 
</section> 

CSS Вопрос:

.video-section .pattern-overlay { 
background-color: rgba(18, 18, 18, 0.15); 
padding: 110px 0 32px; 
min-height: 496px; 
/* Incase of overlay problems just increase the min-height*/ 
} 

.video-section h1, .video-section h2{ 
text-align:center; 
color:#fff; 
} 
.video-section h1{ 
     z-index: 1; 
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; 
    margin: 0; 
    text-shadow: 0px 0px 0px rgb(0, 0, 0); 
    font-size: 5em; 
} 
.video-section h2{ 
     z-index: 1; 
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; 
    margin: 0; 
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6); 
    font-size: 3em; 
} 
.video-section .buttonBar{ 
    display:none; 

} 
.player {font-size: 1px;} 

Answer 1

вы пытались добавить что-то вроде:

.bgndVideo{ 
    background:url(http://placekitten.com/g/200/300); 
    } 

Что должно добавить фон в ваш элемент «видео»?

(бы уже отвечал как комментарий, но будет потерял форматирование)

Answer 2

Я посмотрел в исходный код страницы и realied был DIV с классом YTPOverlay. Это заставило меня задуматься, почему бы не установить фоновое изображение на новом оверлее и пользовательском jQuery, чтобы потушить изображение по таймеру (или когда видео youtube уже готово).

CSS (предназначены для выравнивания в пределах родительского контейнера некоторого вида):

.imageOverlay{ 
    position:absolute; 
    height:100%; 
    width:100%; 
    left:0; 
    top:0; 
    background-image: url("/media/hero.png"); 

} 

Вам также может понадобиться, чтобы играть с Z-индекса, если у вас есть другие элементы на верхней части видео BG.

JS:

setTimeout(function(){ 
     $('.imageOverlay').fadeOut('slow'); 
    }, 4500) 

} 

HTML:

 <div class="jumbotron"><div id="bgndVideo" class="player" data-property="{videoURL:'<?=$Company->layout['hero']['hero_url'];?>',containment:'.jumbotron', quality:'large',autoPlay:true, mute:true, startAt:0, opacity:1}"></div> 
     <div class="imageOverlay"></div> 
     <div class="video-container"> 
//CONTENT HERE 
</div></div> 

JumboTron стиль происходит от щебета bootsrap.

Надеюсь, это поможет!