Jump to content

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


wright67uk
 Share

Recommended Posts

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
Share on other sites

  • 2 weeks later...
This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.