html - YOUTUBE 播放器背景图片

Question

因此目前使用 pupunzi youtube 播放器脚本作为 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);
  }

哪个应该为您的“视频”元素添加背景？

(会作为评论发布，但会丢失格式)