YT Player Background Image

Question

So currently using pupunzi youtube player script for a DIV background and all working great but it takes a second or two for the video to load, in the mean time I would like an image to show in the background, tried doing it with Z value and different positioning but can only ever get it infront of the video! So essentially want an image to replace the grey that is there currently as in the current scenario the grey is actually an overlay..

Web Address: http://www.littlemountainmedia.uk

HTML in question:

    <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 in Question:

.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

Have you tried adding something like:

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

Which should add a background to your 'video' element?

(would've posted as comment, but would've lost formatting)

Answer 2

I looked into the page source and realied there was a div with the YTPOverlay class. It got me thinking, why not set he background image on a new overlay and user jQuery to fade out the image on a timer (or when the youtube vide is ready).

CSS (meant to be aligned within a parent container of some sort):

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

}

You may also need to play with the Z-index if you have other elements on top of the BG video.

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>

The jumbotron styling comes from twitter bootsrap.

Hope this helps!