i'm trying add video background html document. saw tutorial on youtbue on how that.. copied , added document neccessary files such video problem not load video. here's full code of document:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>video background</title> <style> video#bgvid{ min-width:100%; min-height:100%; width:auto; height:auto; background: url(the_desert-wide2.png) no-repeat top center; /* replace **image link** own file*/ background-size:cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } </style> </head> <body> <video id="bgvid" autoplay poster="img/bg.png"> <!-- replace **image link** own file --> <source src="video.ogv" type="video/ogv" /><!-- replace **video link** own file --> <source src="video.webm" type="video/webm" /><!-- replace **video link** own file --> <source src="video.mp4" type="video/mp4" /><!-- replace **video link** own file --> </video> </body> </html> basically video not shown @ , instead bg.png file appears. opened document on opera, firefox, chrome , ie nothing shown :(
so know should load video ? thanks!
you can refer this. https://codepen.io/dudleystorey/pen/knqyk hope helps you.
did give full source address in src ?
<video autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" loop> <!-- wcag general accessibility recommendation media such background video play through once. loop turned on purposes of illustration; if removed, end of video fade in same way created pressing "pause" button --> <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm"> <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4"> </video> <div id="polina"> <h1>polina</h1> <p>filmed alexander wagner 2011 <p><a href="http://thenewcode.com/777/create-fullscreen-html5-page-background-video">original article</a> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. curabitur porta dictum turpis, eu mollis justo gravida ac. proin non eros blandit, rutrum est a, cursus quam. nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, @ convallis mauris magna non justo. etiam et suscipit elit. morbi eu ornare nulla, sit amet ornare est. sed vehicula ipsum mattis dapibus. etiam volutpat vel enim @ auctor.</p> <p>aenean pharetra convallis pellentesque. vestibulum et metus lectus. nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, @ ultricies mi massa eu ligula. suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p> <button>pause</button> </div> 
Comments
Post a Comment