How to put a background video loop on a website HTML/CSS -

How to put a background video loop on a website HTML/CSS -

i'm trying set video background video on website. i've researched lot , not working , don't know why.

on html have:

<video id="bgvideo" controls preload="true" autoplay loop muted> <source src="../images/home_page.mp4" type="video/mp4" > <source src="../images/home_page.ogv" type="video/ogg" > <source src="../images/home_page.webm" type="video/webm" > </video> <script src="scripts/html5ext.js" type="text/javascript"></script>

and on css have:

body { background: url("../images/home_page.png") no-repeat fixed center; } video#bgvideo { position: fixed; right: 0; bottom: 0; width: auto; min-width: 100%; height: auto; min-height: 100%; z-index: -100; background-size: cover; }

however, video not playing , background stays white. suggestions solve problem??

thank much

this should work

<video id="bgvideo" controls preload="true" autoplay loop muted> <source src="home_page.mp4" type="video/mp4" > <source src="home_page.ogv" type="video/ogv" > <source src="home_page.webm" type="video/webm" > </video>

also should create htaccess file/amend htaccess file include following

addtype video/mp4 .mp4 .m4v addtype video/ogg .ogv addtype video/webm .webm

a helpful tutorial doing here

html css video