1. Preserving width to height ratio for videos sized in pixels
If you want your embedded YouTube videos to preserve (approximately) their width to height ratio despite a size that deviates from the YouTube recommandations:
You can enter your values in the boxes below to get the correct results:


Preserving the width to height ratio of a video ensures that its top won't show (superfluous) black space (a 'black bar') (unless the black bar is part of the video itself, of course). The absence of the black bar is of some importance if you want to put text above the video that should look like being part of it. Look at the paused video below. There's no black bar at the top except the 'info bar' that I've put above the video (see below on how to do this).



Now look at this:


There's black space at the top of the video (beneath the info text) that shouldn't be there, which is rather disturbing, the more so because there's a vertical scroll bar in the 'info bar'. The reason why the black space is there: a wrong width to height ratio of the video.

Well, that's not the whole story, because the following video has a wrong ratio too (it's too wide), but without disturbing black bar (space):


Here's the explanation:
A video having a wrong width to height ratio will show a black bar at the top when the width of the video is too small with respect to its height (when the height of the video is too big with respect to its width). It will not show a black bar when the width of the video is too big with respect to its height (when the height of the video is too small with respect to its width). And of course, there will be no bar either when the width to height ratio is correct.


2. An info-bar above the video (still using pixels)
The above shows that if we size a video then, ideally, we should start by giving it a correct width to height ratio. (We can use the boxes at the top of the page for that). Only after we've done that, we can decide to enlarge its width / diminish its height. We should certainly follow this rule if we want to put an info bar above it (= the video) having a vertical scroll bar.

So how do we put an info bar above the video? You might think that giving the video opacity or transparency will take care of it (wmode: opaque or transparent) because that allows us to 'write inside the video'. I've shown HERE that this is not a good solution. I would rather suggest to do something like this (the youtube parameters in the iframe are just examples; each occurrence of '&' should be replaced with '&aamp;' if we want it to be valid):

Main div (red):
The video's width and height are not given in the iframe itself (green), but in the main div (red). This div should have a black background to make the info-bar look like being part of the video. The video's width to height ratio given in the main div should either be 'correct' or, if we decide to deviate from it, the video's width may exceed the width we have in a correct-ratio-situation / the video's height may be smaller than the height we have in a correct-ratio-situation. Finally, the main div may have absolute or relative position (if we use pixels, see below for how to do it with percentages).

Info div (blue):
The info-div should have relative position, a certain height and overflow: auto, a top position of 2px (preferably, experiment with it), and a black backgroud / white font color to make it look like being part of the video itself. Experiment with the other styles.

The (immediate) container div (darkred) for the iframe:
This div should have position: absolute; left: 0px; right: 0px; bottom: 0px and a top position that equals '5px + height of the info div'.

The iframe (green):
It should have position: absolute; height: 100%; width: 100% and frameborder="0".


3. Sizing videos in percentages and the width to height ratio
It's hard to find a formula allowing us to maintain correct width to height ratio for videos sized in percentages. There should be some javascript way to do it using screen.availHeight and screen.availWidth, perhaps. Anyhow, I don't feel tempted to walk on that road right now, because my main concern is to create videos (rather: iframes loading them) that are not too much distorted and can have info bars above them without superfluous black space. Well, if we give a video the same percent value for width and height, it won't be too much distorted and there won't be superfluous black space. So we can create videos having info on top by doing this:

Here again, the video's width and height are not given in the iframe itself (green), but in the main div (red). This div should have a black background to make the info-bar look like being part of the video and position: absolute, because giving it a relative position would prevent the video to acquire its height. The width for the div must be at least equal to its height to prevent black space to appear (from the fact that there's no black superfluous space on your monitor despite a too small value for width, you shouldn't conclude that this is also the case on other monitors). Widening the video by giving the main div much more width than height will result in a badly distorted video.


4. An alternative way of sizing videos vs the black space phenomenon
The main div (in red) of the videos above has explicit values for width and height. We can also size a video by not giving it values for width and height, but values for the distance of the video borders relative to another element, like the body of the html. When we size (and position) the video that way, the main div must have absolute position. Concrete example:

In this example, the distance from each border of the main div (= of the video) to the window borders equals 20%, so the video has 100%-2*20%=60% width and height, meaning that it will not show a 'black bar'. But, as it follows from the preceding lines, if we (considerably) increase the values for left and right (in the main div), the videos width will be too small width respect to its height, and superfluous black space will appear as a result. It also follows from the above that there will not appear black space if we decrease the values for left and right (or if we increase the values for top and bottom), because then the video's width will be wide with respect to its height.

How about using pixels here? If we use pixels instead of percentages, and if the values for left, top, right and bottom are identical, there will be no superfluous black space, because with all screen resolutions, width exceeds height. But the risk of a distorted video is much higher if we use pixels rather than percentages, because of their fixed nature. So I would recommend using percentages if we size the video using left, top etc. instead of width and height.


NOTE: the starting image of a paused video
If we embed videos according to the guidelines above, the top of the video's starting image may be cut off. But as soon as we start the video, everything will be fine.


© Arie Molendijk, http://www.mesdomaines.nu/music / http://www.mesdomaines.nu/lesserknownclassicalmusic