molendijk

In July 2010 an enhancement to the YouTube video embed capability became available through a new embed code style. This style uses <iframe> and looks like this:

<iframe src="http://www.youtube.com/embed/VIDEO_ID?" frameborder="0"></iframe>

After VIDEO_ID? we can add the normal parameters, like this:

<iframe src="http://www.youtube.com/embed/VIDEO_ID?start=0&amp;autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=0&amp;modestbranding=1&amp;vq=large" frameborder="0"></iframe>

and also a new parameter that only works for the new embed code style:

&amp;wmode=opaque (or: wmode=transparent, or: wmode=window).

If we put wmode=opaque or wmode=transparent, the iframe will be transparent, allowing us to put text on it (if we use the right zIndex). The iframe will not be transparent if we choose wmode=window.

Now, putting text on a video makes only sense if we provide the text with some background (color) and font color, since the videos don't always have the same background / font color. Not using a background and a font color for the info we want to put on the video could then result in text being invisible.

So we should use a background (color) and a font color for the text we put on the video. But then some part of the video gets hidden behind the text. That may provoke certain undesired results, like the top of a video being cut off.

The conclusion is that, at least in certain cases, it seems better not to use the wmode parameter at all. There are other means for adding info to a video, like putting the video (vertically) under a div containing the video info and then wrapping the info div plus the iframe in another div, like this (just an example):

<div style="position: relative; top: 40px; margin: auto; width: 600px; height: 283px; overflow: hidden; ">
<div style="position: relative; text-align: center; height:60px; padding: 3px; overflow: auto; background: black; color: white; font-family: verdana; font-size: 11px">Text about video here<br>Text about video here<br>Text about video here<br>Text about video here</div>
<iframe style="width: 600px; height: 220px" src="http://www.youtube.com/embed/mv4cx3C3SZ4?start=0&amp;autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=0&amp;modestbranding=1&amp;vq=large" frameborder="0" allowfullscreen></iframe>
</div>

(The (outermost) container div may have absolute or relative position; the container div must have 'overflow: hidden'; the height of the container divs equals the sum of the iframe's height and the height and padding for the info div; the div with the info must have relative position, 'overflow: auto', a background color and a font color; the container div and the iframe must have the same width; the iframe may have its own individual height).

If we use this method for putting an iframe on our page, we would do something like this:

<div style="position: absolute; left:100px; top: 100px; right: 100px; bottom: 100px; ">
<div style="position: relative; text-align: center; height: 60px; padding: 3px; overflow: auto; background: black; color: white; font-family: verdana; font-size: 11px">Text about video here<br>Text about video here<br>Text about video here<br>Text about video here<br>Text about video here</div>
<div style="position: absolute; left:0px; top: 63px; right:0px; bottom: 0px">
<iframe style="position: absolute; width: 100%; height: 100%" src="http://www.youtube.com/embed/mv4cx3C3SZ4?start=0&amp;autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=0&amp;modestbranding=1&amp;vq=large" frameborder="0"></iframe>
</div>
</div>

where the height for the div (directly) containing the iframe equals the sum of the height and the padding for the text of the info div.

Copy the examples above, paste them in a file and experiment with the result.

Arie.