[WordPress] CSS を使ってビデオ背景カバー WordPress の上のフッター

スポンサーリンク

質問

私の会社が使用してワードプレス。背景としてビデオの行為を持っていることのいくつかの有用なコードを発見したし、我々 はどのように迅速に弊社の web ブラウザーにロードについて満足しています。残念なことにこのような背景を表示上のフッターに、フッターは表示されなく。2 つの方法で html コードを挿入した: 1。 2 ビジュアルコンポーザーで使用される”生の html”フィールド。 WordPress のテキストエディターを使用して html コードを挿入します。前述のコードは非常によく動作しますが、フッターをカバーしています。ここでは、ページの場所: http://gathereducation.com/homepage-html-5-video/

ここでは、html、CSS、および JS:

HTML:

<video autoplay loop poster="/wp-content/uploads/2015/03/student_pov.jpg" id="bgvid">
<source src="/wp-content/uploads/2015/03/HomepageBannerNewClass.webm" type="video/webm">
<source src="/wp-content/uploads/2015/03/HomepageBannerNewClass.mp4" type="video/mp4">
</video>

CSS:

video { display: block; }

video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%; min-height: 100%;
width: auto; height: auto; 
z-index: -100;
background: url(/wp-content/uploads/2015/02/student_pov.jpg) no-repeat;
background-size: cover;
transform: translateX(-50%) translateY(-50%);
}

@media screen and (max-device-width: 800px) {
.content { background: url(http://gathereducation.info/wp-content/uploads/2015/02/student_pov.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}

生 JS:

<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->

誰もがこの問題を解決する方法を知ってですか?何が、問題の原因の理解が、フッターを持つ最もよい方法を把握することができないと思うを背景に-それの下には下に表示

ありがとう !

答え

ちょうどあなたのフッターに z インデックスを追加します

footer {
  z-index: 100;
}

クロムメッキで見事

http://stackoverflow.com/questions/28969222/video-background-via-css-covers-footer-on-wordpress

スポンサーリンク

Leave a Reply