If I'm placing a HTML5-Video element inside a div, it causes a larger height of the wrapper than the video element. The wrapper is 7px heigher than the video source. There is no min-height or something else.
Have a look! (Scroll down to the Video)
The video element is 513px high and the wrapping div (.image) is 520px high.
<div class="image">
<video muted loop autoplay style="width:100%;" id="video-player">
<source treatidasreference="1" type="video/mp4" src="/fileadmin/user_upload/bilder/projekte/04_Online_Film_3D-CGI/sparkasse_iserlohn/Sparkasse_175Jahre_FinalCut_01_1_1_NEU.mp4"></source>
</video>
</div>
The HTML5 video element is noted as being Flow Content or Phasing Content or Embed Content meaning it will behave like an inline element. It therefore honours whitespace around your HTML (like spaces, line-breaks etc).
Option 1: display: block;
Making it a block will remove the space under the video element that is reserved for the descender on the text. (Descenders are the bottom part of characters such as y, g, p etc that descend to the baseline).
To fix it, set your video to be:
display: block;
Option 2: vertical-align: top;
Set the video to have a vertical alignment of top. The space reserved for the descenders will still be there but it will appear towards the top of the video but because the height of the video will be that much more than the text it will never have an affect.
vertical-align: top;
See here for more information on the video tag and its
properties.
And here for more information on flow content.
And finally here for more information regarding font
descenders.
Related
I replaced an <img> tag with a <picture> tag and the image is now scaled to the width of the container, instead of the height, and it's below the containing div.
The picture tag can be seen here (the logo): https://notzeroyet.com/?ign_skip=4742231701016
If I use the markup editor in the browser and just replace the picture with the enclosed img, the logo displays just fine. Didn't notice any positional CSS (div > img or similar) that would impact.
Why would this happen?
remove display: inline-block from #logo
Thanks #arieljuod, it worked.
I have in my sidebar a single video (embedded) and after that a few ads. I cant add a space between the video & the 1st ad even when writing the html code. any help?
You could wrap your iframe in a div and use a margin to set a distance to the next element. Or give the iframe itself a margin.
Something like:
<div class="wrapperForIframe">
<iframe>....content</iframe>
</div>
And the CSS:
div .wrapperForIframe {
margin: 10px;
}
I have a top navigator, and an iframe below the navigator which load the content.
The layout is kind of like
<body>
<div style="text-align:middle">
<div id="nav"></div>
<iframe></iframe>
</div>
</body>
The navigator is set to fixed width to match the width of iframe content which is not full screen width. So that the navigator and the iframe are aligned at both sides.
But when iframe's height grows beyond the screen, the vertical scroll bar for the iframe shows up and the the iframe becomes a little left(no longer in the absolute horizontal position) and not aligned with the top navigator.
How could I make the iframe always showing at the center even with a vertical bar?
I think this should be a common issue but haven't searched out a similar question here...
Edit 1:
Attach a full sample here to illustrate this question.Here index is the main page, iframe2.html is a frame without vertical bar and iframe.html is the one with a bar. The blue block(iframe) is not aligned with the other two:
index.html:
<html>
<head></head>
<style type="text/css">
iframe {
width : 100%;
padding : 0;
margin: 0 auto;
display : block;
}
</style>
<body>
<div style="text-align:center;margin:0 auto;overflow:hidden">
<div style="background-color:red;width:900px;margin:0 auto;padding:8px 0 8px 0">
<span>test</span>
</div>
<iframe frameborder="0" scrolling="auto" src="iframe2.html" style="height:200px;"></iframe>
<iframe frameborder="0" scrolling="auto" src="iframe.html" style="height:100%;"></iframe>
</div>
</body>
</html>
iframe2.html
<html>
<head></head>
<body style="padding:0px;margin:0px;">
<div style="width:900px;height:190px;background-color:green;margin:0 auto"></div>
</body>
</html>
iframe.html
<html>
<head></head>
<body style="padding:0px;margin:0px;overflow-y:scroll">
<div style="width:900px;height:2000px;background-color:blue;margin:0 auto"></div>
</body>
</html>
Result:
You can center the iframe using css,
iframe {
margin: 0 auto;
display: block;
}
See the example: https://jsfiddle.net/bnby6umd/
After my comment (as this seemed to help you with the edits you have made):
Perhaps always force scrollbar even when it is not needed, and then align the navbar to that? body { overflow-y: scroll; }
and further to your reply, I would suggest the simplest way to keep the elements aligned would be to ensure they are the same width. As you are now forcing the scrollbar permanently, perhaps the easiest way to do this would be to add to the width of the first element, or remove from the width of the second, to account for the width of the scrollbar.
Although this would be very browser dependant as each browser may use a slightly different width scrollbar, as per this article, I suggest altering whichever width by 17 pixels, and see if that achieves the effect you are after.
UPDATE
Apologies, I misunderstood what you were after. The reason you are experiencing this issue is because you are getting confused between styling the iframe element and the content within the document it is displaying.
By setting the <div> within the 'iframe.html' files to a width of 900px, you are only styling the content being displayed. The 'outer' iframe element is being styled to 100% width, and so will span the full width of the window. Because of this, the centered content will be offset by the horizontal scrollbar, giving the appearance of not being aligned - however the actual iframe is not moving at all.
It is only possible to align the edges of two elements, regardless of their position, is for them to have the same width (obviously, as otherwise the edges could never line up). To do this, style the <iframe> to be of the correct width - what you do with the content behind that is then unimportant. This way, the width of the scrollbar will then be taken into account automatically, and the total width adjusted accordingly.
Basically, in the styling for the iframe, change width: 100%; to width: 900px;.
Here's a Fiddle.
I've tried to create a diagram to help explain:
On the left the content is offset by the scrollbar, whereas on the right, the element is styled and centered, not the content, and so the scrollbar just overlaps the content.
You may also like to take a look at some documentation and tutorials for iframes.
Imagine three images with fixed size:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.photos img {
width: 320px;
height: 240px;
background-color: black;
}
</style>
</head>
<body>
<div class="photos">
<img src="abc" />
<img src="def" />
<img src="ghi" />
</div>
</body>
</html>
When you look at such page in IE or Chrome, you'll see what I expected - threee images with fixed sizes.
In Firefox however, it doesn't work.
But if I set the images to display: block; or remove the DOCTYPE (doesn't show on jsfiddle) it works.
What am I doing wrong?
Thanks
This seems to be an old feature in Firefox: I found a discussion about it from year 2007:
So I suppose it’s intentional and won’t go away. I guess they might be thinking this way: Everything is fine if you set dimensions on an image, we’ll scale it. But if the image is missing, we will render the alternative text instead, and this changes the img element from a replaced inline element to a text, a non-replaced inline element, and for it we won’t support height and width, by the spec. Instead, the text determines the dimensions. And presumably the authors of Firefox think this is the right thing to do, and only in Quirks Mdoe do they do as other browsers do.
If you add alt attributes (as you should, every img should have one), you’ll see how the box size varies by text length. Apparently Firefox treats a missing alt here as equivalent to alt="", implying zero width.
This would explain why setting display to inline-block (or block) changes the behavior: then width and height are applied.
I think firefox wont be applying height and width to <img> element which are empty and hence it must be rendering like that, so use CSS display: block;
Here's my fiddle
Or use an image and see...
Updated : fiddle
SUMMARY: an embed with 100% width and height pushes its parents size to be 100% width and height of the grandparent. How do I get the embed element to collapse all the white space around it so that it fits the width and height of its parent perfectly?
I have a page with an image, which upon being clicked gets replaced by an embed element that plays a quicktime movie.
The problem is that the embedded movie has a large amount of white space around it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title></head>
<body>
<div style="border:1px solid #000;">
<embed id="iframeMovie" height="100%" width="100%" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
</div>
</body>
</html>
The video is of unknown size so how do I get rid of this whitespace while leaving height and width at 100%?
EDIT: Though it doesn't show, I am actually clearing the padding and margins. The white space still remains.
EDIT 2: The white space in question is between the movie and the black border, not the black border and the browser.
Are you clearing the default browser margin and padding? Otherwise, you need to do that.
Most people use CSS reset styles to normalize margin and padding across browsers. A good one to use is Eric Meyer's: CSS Reset
EDIT: To remove the space underneath the embed, set display: block on the embed. See: http://media.nodnod.net/embed.html
WOOHOO, I've searched a very long time for this answer and I finally found it!
You'll have to put the embed element in an object element which is in an iframe or a frame:
The iframe page
<html>
<body>
<iframe src="sample.html" height="100%" width="100%">
</iframe>
</body>
</html>
the iframe source
<html>
<body>
<object height="100%" width="100%">
<embed src="sample.mov" height="100%" width="100%"/>
</object>
</body>
</html>
Make sure that the height and width value in the iframe, object and embed element the same is.
I am not familiar with embed elements, but it seems to me that when you set the width to 100%, you set it to the width of the parent element, which is a div in this case and a div occupies the whole available width as it is a block element.
So you can either float the surrounding div or display it inline to have its size adjust to the contents instead of the available space around it.
Try setting float: left on both the div and the embedded element just like this. That will remove the extra white space.
<div style="border:1px solid #000; float: left; width: 100%; height: 100%;">
<embed id="iframeMovie" height="100%" width="100%" style="float: left" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
</div>
Hmm...
It's an ugly hack, but you could use a table:
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle"><embed /></td>
</tr>
</table>
Have you used a DOM inspector to verify the whitespace isn't part of the embed?
Also, you can put it in a panel/div/etc and mess with the css:
position: relative; top: -10px; left: -10px; overflow: hidden;
it turns out that theres no way of doing this other than making the movie scale to the size of the parent by using scale="aspect".
While not the perfect solution, it will have to do for now.