I'm attempting my first web video project and am getting nowhere and need a little help with using a full width video header or background.
I found an example that does what I am trying to do using the below videos and it works just fine - no buffering, acceptable quality, etc.
The .mp4 file uses a 640x360 format # 23 fps (613kbps) and this works fine on any display I view it - the whole frame is visible top to bottom, side to side.
The research I've done indicates the best video format to use is 720 x 24fps, which I have tried (actual dimension is 1280x720) but found it only works well on less than maximized browser resolutions, in which case, it looks great, otherwise, a small portion of the bottom, maybe the bottom 18% of the frame, is not visible until you scroll down, which is unacceptable. I need the video to work as well as the 640x360 with the whole image visible. In addition, buffering occurs with the 720 format, whereas there is no buffering with the 640x360.
I am using Sony Vegas for the video editing and there is no option for a 640x360 format. The closest is 640x480 but that produces the same result - to tall and the bottom is not visible.
There is a site that uses the 1280x720 format successfully (http://mazwai.com/#/) but I have no idea how.
Can someone point me in the right direction?
Thank You.
This is the current code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video test</title>
<script>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
</script>
<style>
body{ margin:0px; background:#000; max-width:1000; }
#bg_container{ height:800px; overflow:auto; }
#bg{ width:100%; }
</style>
</head>
<body>
<div id="bg_container">
<video id="bg" src="www.parishpc.com/images/720.mp4" autoplay loop muted"> </video>
</div>
</body>
</html>
This code worked a little bit better - only the bottom 5% was not visible:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video test</title>
<style>
body, html { margin: auto;
background:#fff;
height: 100%;
}
header {
height:100%;
width:100%;
overflow:hidden;
position:relative;
}
.video {
position:fixed;
top: 50%; left: 50%;
z-index:1;
min-width: 100%;
min-height: 100%;
width:auto;
height:auto;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<header>
<video autoplay loop class="video">
<source src="www.parishpc.com/images/720.mp4" type="video/mp4">
</video>
</header>
</body>
</html>
If anyone is still trying to make the video take up the entire viewport, this can be done with the following code ->
(I am also fairly certain this requires you to add the video through your .html using the tag, instead of adding it as a background in your css properties)
Set your parent container you want to fill the video with to:
position: relative;
Add the following properties to your video:
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
z-index: -2;
object-fit: fill;
Try
body {
margin: 0;
padding:0;
}
and remove transform: translate(-50%,-50%); from video class
This should work
Let me know if you require any further help
I'm not sure exactly what you want, but having a video background without stretching or cut off parts is impossible to do while accommodating to every user's window size.
This solution will make sure the video is 100% of the window's height. If they want to see the cut off parts they'd have to resize their window to fit the width.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video test</title>
<style>
body {
margin: 0;
padding: 0;
}
#container {
height: 100%;
width: auto;
}
.video {
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<video autoplay loop class="video">
<source src="http://www.parishpc.com/images/720.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
Related
I have a problem with my website, I want to have a picture named banner.png in the header, I am supposed to use header and not div, since this is html5.
this is the index.html file
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
This is the stylesheet
header {
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
I do find the picture when inspect element but it looks like the height is not working.
header {
/*DEMO*/background-color: red;
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Question to yourself: 15% of what?
If you use the developer tools of your browser and select the html or body tag from the opened window, you will see that the html and body do not have any height. 15% of 0 = 0, so the header must have a fixed height, for example: 230px, or you can add this style in your CSS file:
Html,body {position:relative;height:100%;}
For the above percentage height to work with your header add
html, body {
height: 100%;
}
Or change the height on the header to padding bottom.
header {
padding-bottom: 30%;
}
The above answer will solve the issue, but if you for any reason want to set the height as % in your header, you need to set the size of the html to 100% so that the header gets 15% of it.
html{
height:100%;
float:left;
}
When you say height: 15%;, You mean the header should take 15% of it's parent. This will have no effect since you haven't set the height of the parent which is the body. You either have to give the body height or else use pixels instead of percentage
header {
height:100px; /*You can specify your size*/
}
You can make use of view units, vh for view height and vw for view width JS Fiddle
header {
height: 15vh; /* represents 15% of the view height, 100vh is 100% of the height*/
I finally found a solution: note that also width was not working
header {
background-color: red; /* red for DEMO */
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
html, body {
height: 100%; /* fix height*/
width: 100%; /* fix width */
margin: 0; /* fix width, or margin: 0 -5px; in header {} */
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Another Post about this: Percentage Height HTML 5/CSS, it also mentions the use of height: 15vh;
<header> element position in html
It is invalid html to have a <header> element as a child of the <html> element. Your html is not valid accord to HTML5 specs.
You must move the <header> element to be inside the <body> element.
Part of what is happening here is that because the <header> element comes before the <body> element, the document model is forced to create a <body> element to contain <header> so your <body> element is being ignored.
Move your <header> tag to be within <body> and go from there.
Once that is fixed, then you can work on the sizing issue. Because the <body> element has nothing in it, the width will be 0. You can force it to fill the frame by giving body a width of 100% and your header image will work.
body {
width: 100%;
}
If you want the header to be 15% of the height of the visible window then change height to use the vh (viewport height) unit which is a percentage of the height of the visible window.
header {
[...]
height: 15vh;
}
I am trying to design a web form in ASP.NET. In that I am trying to set a background color to different empty divs. Normally a simple html code like below works:
<html>
<head>
<style>
#header{
width:100%;
height:20%;
background-color:lightblue
}
#nav-bar{
width:100%;
height:5%;
background-color:lightgreen;
}
body,html{
margin:0;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="nav-bar">
</div>
</body>
</html>
But if I use this same snippet in ASP.NET, I fail to achieve the desired result. The browser displays nothing. My aspx code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server"><title></title>
<style type="text/css">
#header {
background-color: lightblue;
height: 20%;
width: 100%;
}
#nav-bar {
background-color: lightgreen;
height: 5%;
width: 100%;
}
body, html { margin: 0; }
</style>
</head>
<body runat="server">
<div id="header">
</div>
<div id="nav-bar">
</div>
</body>
</html>
So how can I set a background color to an empty div in ASP.NET? Any help would be much appreciated. Thanks!
The problem is that your #headerand #nav-barhave percentage heights. You'll see if you change them to pxdimensions, they empty div's still show up. So your problem doesn't have anything with ASP.NET it's just a CSS issue.
If you want the heights to be responsive to the user's screen, you should try the vhtag. This stands for viewport height. So if you have 20vhfor example, it will take up 20% of the users screen height.
See my updated JSfiddle:
http://jsfiddle.net/0mr9z6hy/2/
percentage heights may work differently across browsers
but one problem is you have no height specified on the body so the height is only really the height of the actual content of your page which is not much.
html, body{
height: 100%;
}
I have tried literally everything I can think of. I have tried dozens of coding samples from the stack and tutorial sites. I cannot get this to work no matter what I do, and I'm absolutely at my wits end with trying to figure it out. Me and CSS don't get along.
Here is what I'm trying to do:
Static Header (always on the screen.)
Footer that always stays at the bottom of the page. (Scrolls with content, but if there isn't enough content will appear at bottom of the screen.
Left menu with background that goes all the way down to the top of the footer.
I'm having trouble getting the background to go all the way down. It is a normal problem of being unable to have 100% parents, relatives and absolutes. This code I have now works fine with the exception of the background. I'm honestly considering just making the background a image and have it repeat. Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#main_wrapper {
min-height: 100%;
position: relative;
}
#header {
width: 100%;
background:#0F0;
height:42px;
position:fixed;
left: 0;
top: 0;
}
#content {
margin-left: 200px;
background:#F00;
}
#footer {
width:100%;
height:32px;
position:absolute;
bottom:0;
left:0;
background:#00F;
}
#content_wrapper {
padding-bottom: 32px;
padding-top: 42px;
overflow: auto;
}
#left_menu {
width:200px;
background: #FF0;
float:left;
}
</style>
</head>
<body>
<div id="main_wrapper">
<div id="header"></div>
<div id="content_wrapper">
<div id="left_menu">MENU</div>
<div id="content">CONENT</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
JSFiddle Source
As you can see in the Fiddle code, what I'm going for is to have the yellow background take up the whole height. And any content that gets added will cause the whole page to scroll, footer to move to bottom and header remain static. All of that works right now except for the yellow background color taking up the whole height.
The easiest thing to do would be to add an image to the background that repeats in the Y direction.
background-image:url(images/background.gif);
background-repeat:repeat-y;
This gets the job done, but there has to be a better way!
I've been working on a responsive site and have come to a bit of a problem with Image Maps. It seems that Image Maps don't work with Percentage based co-ordinates.
After a bit of googling I found a JS workaround - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html.
However I want the site to work with JS disabled.
So after exhausting those possibilities I decided to look into using relatively positioned Anchor tags over the images to do the same thing. This is a better option anyway IMO.
I've tried to place the anchor tags over the image with percentage based position and size, but whenever I rescale the browser the anchor tags move disproportionately to the image.
HTML:
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
</div>
CSS:
#block img {
max-width: 100%;
display: inline-block;
}
a.one{
height:28%;
width:19%;
top:-36%;
left:1%;
position:relative;
display:block;
}
a.two{
height:28%;
width:19%;
top:37%;
left:36%;
position:absolute;
}
Here's a jsFiddle to describe what I mean - http://jsfiddle.net/wAf3b/10/. When I resize the HTML box everything becomes skewed.
Any help much appreciated.
You had a few problems with your CSS in the fiddle you posted (as well as a missing closing div tag). After making sure that #block was relatively positioned, not 100% height, and that your anchors were block/absolutely positioned, I was able to get the tags to move with the blocks.
Here is the updated fiddle:
http://jsfiddle.net/wAf3b/24/
CSS
html, body {
height: 100%;
}
#block{ float:left; width:100%; max-width: 400px; position: relative; }
#content{
height: 100%;
min-height: 100%;
}
#block img {
max-width: 100%;
display: inline-block;
}
a.one{ height:28%; width:25%; position: absolute; top:55%; left:5%; display:block; background:rgba(0,255,0,0.5);}
a.two{ height:28%; width:25%; position: absolute; top:60%; left:70%; display: block; background:rgba(255,0,0,0.5);}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>Bulky Waste</title>
</head>
<body>
<div id="content">
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
</div>
</div><!--/content-->
</body>
</html>
One important thing to note with the new html is the use of DOCTYPE. For some reason, some browsers don't like it when it is not capitalized.
Absolutely-positioned elements are no longer part of the layout, so they cannot inherit relative dimensional properties from their parent. You'll need JavaScript to do what you want.
People who disable JS expect a degraded experience already.
I am trying to position a div (footer) element at the bottom of a printed page. In firefox this is working fine and the div will sit along the bottom of the printed page.
However, in Safari the footer moves up the printed page if the browser window is not very tall. eg. if the browser window is 200px tall then the footer sits on the print out about 200px down. If the browser is 400px tall it draws the footer 400px down the page.
I would like to get the same behaviour in Safari as I can get in Firefox if possible?
The basic code I am using for this is:
<html>
<head>
<title>Print footer at bottom of a printed page</title>
<style type="text/css">
* { margin:0; padding:0; }
html, body { height: 100% !important; }
#footer { height:25px; border-top:solid 1px #000;
position:absolute; bottom:0; }
</style>
</head>
<body>
<p>Some content on the page here</p>
<div id="footer">This should appear at the very bottom of the printed page</div>
</body>
</html>
Edit: I'm happy if the solution requires a hack...it only needs to work in Safari
I just printed this out in Chrome (same rendering engine as Safari), and the line showed at the bottom...
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style type="text/css" media="print">
html, body { margin: 0; padding: 0; }
body { height: 11in; width: 8.5in; }
#footer { position: absolute; bottom: 0; }
</style>
</head>
<body>
<div id="footer">
This will always print at the bottom
</div>
</body>
</html>
Notice that I have media="print" on the style tag. For more on this, read Going to Print on ALA.
This is the code i use. Note I am setting both html and body height to 100% which is needed for Chrome and Safari.
#media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}
Have you tried this version?
http://www.themaninblue.com/experiment/footerStickAlt/
I know it works in browsers, but not sure about print.