Unlike with images, embedded source, such as YouTube videos, won't necessarily format correctly unless both width and height are explicitly specified. And even then, things won't necessarily appear as expected.
This object has no explicit sizes set. At the time this was written, it ends up with the video having large amounts of black fill at the left and right.
This object has an explict width set, but it doesn't necessarily match the source height, and so ends up with large amoutns of black fill at the top and bottom.
This has an explict width and height set (in pixels) and displays reasonably well. But as with images, this size is permanently fixed, and will appear too large on low resolution devices and too small on high resolution devices.
This has an explicit width and height set (as percentage), but the height seems to be ignored, with various amounts of black fill on the left and right depending upon the current width of the displayed page.
This has an explicit width and height set (as em
units).
It displays fairly well, and expands and contracts appropriately
if one changes the browser's font size.
To get page-relative scaling to work (i.e. the image expands and contracts when the window gets resized) some non-obvious tricks are necessary.
div to contain the video,
with relative positioning,
and sizes that are page-width percentages.div within that,
with a margin-top of 75% (4/3) for NTSC
or 56.25% (16/9) for HD,
to force the size of the outer div.div,
include the iframe, with absolute positioning,
anchored (at top, bottom, left, and right) to position 0,
and with 100% width and height to fit the outer div.Note that as always, these CSS styles work only if the HTML code in the body contains no formatting instructions. Of course no good HTML code ever would, as its purpose is strictly to describe the content, not the appearance.