所以目前使用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;}
答案 0 :(得分:0)
您是否尝试过添加以下内容:
.bgndVideo{
background:url(http://placekitten.com/g/200/300);
}
哪个应该为“视频”元素添加背景?
(会发布评论,但会丢失格式)
答案 1 :(得分:0)
我查看了页面源代码并认识到有一个带有YTPOverlay类的div。它让我思考,为什么不在新的叠加层上设置背景图像,用户jQuery在计时器上淡出图像(或者当youtube vide准备就绪时)。
CSS(意味着在某种父容器中对齐):
.imageOverlay{
position:absolute;
height:100%;
width:100%;
left:0;
top:0;
background-image: url("/media/hero.png");
}
如果BG视频顶部还有其他元素,您可能还需要使用Z-index。
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造型来自twitter bootsrap。
希望这有帮助!