wright67uk Posted January 20, 2015 Share Posted January 20, 2015 I'm trying to get my video to fill the whole of the viewable screen. All I want to be able to see when my site loads is the video and the h1 tag which sits over the bottom of the video - (welcome to website). How can I achieve this please? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> #logo { position: fixed; top: 10px; left:50px; width:140px; height:50px; background-image: url("paper.gif"); z-index:3; } #opacity { width: 100%; height:460px; color: #fff; opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */ position: absolute: top:225px; } #content { width: 100%; height:800px; background-color:white; color: #black important!; } .low { border: 0 none; display: inline-block; font-size: 80px; padding: 0 20px; line-height: 100px; margin-bottom: 0; margin-top: 15px; text-transform: uppercase; } h1{font-family: Arial, Helvetica, sans-serif;} #space { width:100%; height:355px; } .red {color:red;} html, body { margin:0; padding:0; } #nav { height:70px; width:100%; display: none; position: fixed; background-color:#fff; z-index: 2; } video { width: 100% !important; height: auto !important; visibility:hidden; } #videoclip { position: fixed; z-index: -1; } </style> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $(window).bind("scroll", function() { if ($(this).scrollTop() > 50) { $("#nav").fadeIn(); } else { $("#nav").stop().fadeOut(); } }); });//]]> </script> <script type='text/javascript'> jQuery(document).ready(function(){ /* stop the black video loading box */ delayShow(); }); function delayShow() { var secs = 400; setTimeout('jQuery("video").css("visibility","visible");', secs); } </script> </head> <body> <div id="logo"><img src="http://www.blackdog.london/sites/default/files/bdlogo.png" width="100%" height="100%" alt="Home"></a></div> <div id="nav"></div> <div id="videoclip"> <video autoplay loop> <source src="walking.mp4" type="video/mp4"> <source src="walking.ogg" type="video/ogg"> <source src="walking.mov" type="video/mov"> <img src="frame1.png"/> Your browser does not support the video tag. </video> </div> <div id="opacity"> <div id="space"></div> <h1 class="low">welcome to website</h1> </div> <div id="content"><h1 class="low">content <span class="red">here<span></h1></div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/294089-how-can-i-get-my-video-to-fill-the-whole-viewable-screen/ Share on other sites More sharing options...
cssfreakie Posted February 1, 2015 Share Posted February 1, 2015 Since you're already using jquery have a look at backstretch Dont forget to update your version of jquery! Link to comment https://forums.phpfreaks.com/topic/294089-how-can-i-get-my-video-to-fill-the-whole-viewable-screen/#findComment-1504504 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.