| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | |
| <script> | |
| $(document).ready(function(){ | |
| $("button").click(function(){ | |
| $("#bg").animate({height: "400px",}, 1500, "swing", function(){ | |
| $('video').get(0).play() | |
| } ); | |
| }); | |
| $('video').on('pause', function(){ | |
| $("#bg").animate({height: "200px",}, 1500, "swing", function(){ | |
| } ); | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| #bg{ | |
| background-image: url("t.jpg"); | |
| background-position: center bottom; | |
| width: 600px; | |
| height: 200px; | |
| min-height: 200px; | |
| background-color: blue; | |
| position: relative; | |
| } | |
| .mov{ | |
| position: absolute; | |
| left: 172px; | |
| width: 264px; | |
| bottom: 218px; | |
| display: block; | |
| } | |
| .poster{ | |
| display:nonel; | |
| position: absolute; | |
| left: 172px; | |
| width: 264px; | |
| bottom: 218px; | |
| display: block; | |
| } | |
| #desk{ | |
| background-color: rgb(199, 189, 189); | |
| padding: 20px; | |
| margin: 20px; | |
| border-color: brown; | |
| border-width: 2px:; | |
| border-style: solid; | |
| font-size: larger; | |
| font-family: "arial"; | |
| } | |
| </style> | |
| </head> | |
| <body > | |
| <div id="bg" > | |
| <video class=mov > | |
| <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> | |
| <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> | |
| Your browser does not support HTML5 video. | |
| </video> | |
| </div> | |
| <div id=desk> | |
| <h3>The Desk</h3> | |
| <button>Make Decision</button><br><br> | |
| </div> | |
| </body> | |
| </html> |