How can i get my video to fill the whole 'viewable' screen

wright67uk · 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>

cssfreakie · February 1, 2015

Since you're already using jquery have a look at backstretch

Dont forget to update your version of jquery!

Edited February 1, 2015 by cssfreakie

Sign In

How can i get my video to fill the whole 'viewable' screen

Recommended Posts

wright67uk

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information