Geek Answers Handbook

Html5 Background video full screen

im trying to make html5 background video on my website. but I have some problems with IE and Google Chrome .. I made a Live example HERE Can someone tell me what is wrong with my video, I found its black screen in Google Chrome and did not work in IE CSS:

<section class="container-1140" id="mast" style="height: 775px;"> <div style="overflow:hidden; background:url(http://riskeverything.us/wp-content/themes/risky/images/splash-home.jpg) no-repeat; background-size:cover;" id="mast_inner-1"> <div id="mast_inner-2"> <video loop="1" autoplay="1" id="mast_inner-2" class="_534g" style="display: block;" controls="true"> <source src="video/video.mp4"></source> <source src="video/video.webmhd.webm"></source> <img src="video/poster.jpg"> </video> </div> </div> </section>

HTML:

 <section class="container-1140" id="mast" style="height: 775px;"> <div style="overflow:hidden; background:url(http://riskeverything.us/wp-content/themes/risky/images/splash-home.jpg) no-repeat; background-size:cover;" id="mast_inner-1"> <div id="mast_inner-2"> <video loop="1" autoplay="1" id="mast_inner-2" class="_534g" style="display: block;" controls="true"> <source src="video/video.mp4"></source> <source src="video/video.webmhd.webm"></source> <img src="video/poster.jpg"> </video> </div> </div> </section>
+6
source share
4 answers

you can use this plugin . It is simple and can solve your problem.

0
source

You can only use CSS, which will work for most browsers.

 #video_background { position: fixed; bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 100; overflow: hidden; }
0
source

z index must be -100 to make background video in chrome

0
source

You need to embed ID your video that you want to set in the background. try it

http://jsfiddle.net/bfvopg6p/

0
source

More articles:


All Articles