1

現在、DIV バックグラウンドに pupunzi youtube プレーヤー スクリプトを使用しており、すべてうまく機能していますが、ビデオの読み込みに 1 ～ 2 秒かかります。その間、バックグラウンドで画像を表示したいので、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;}
4

2 に答える 2

0

ページのソースを調べたところ、YTPOverlay クラスの div があることがわかりました。新しいオーバーレイとユーザーjQueryに背景画像を設定して、タイマーで（またはYouTubeビデオの準備ができたときに）画像をフェードアウトさせてみませんか？

CSS (ある種の親コンテナー内に配置されることを意味します):

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

}

BG ビデオの上に他の要素がある場合は、Z インデックスで遊ぶ必要があるかもしれません。

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>

ジャンボトロンのスタイリングは、twitter のブートストラップから来ています。

お役に立てれば！

于 2015-02-19T00:33:47.753 に答える
0

次のようなものを追加しようとしましたか：

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

「ビデオ」要素に背景を追加する必要があるのはどれですか?

（コメントとして投稿したはずですが、フォーマットが失われていたでしょう）

于 2015-01-20T17:02:56.693 に答える