Bug 54356 – Relative width or height on video element make controls float away from the actual video

• Status: RESOLVED
• Resolution: WORKSFORME
• Component: Layout and Rendering

[Dimitri Glazkov (Google)]

http://jsfiddle.net/dglazkov/BJTgu/2/embedded/result/ -- resize the screen to see the stuff.

[Eric Carlson]

The <video> is in an iframe, which is in a 1041px height div. A video is supposed to maintain its aspect ratio and render "inside the element's playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed."

The controls are always along the bottom of the element, so when the browser window is not wide enough the video is letterboxed and the controls aren't near the bottom of the video.

[Dimitri Glazkov (Google)]

(In reply to comment #1)
> The <video> is in an iframe, which is in a 1041px height div. A video is supposed to maintain its aspect ratio and render "inside the element's playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed."
> 
> The controls are always along the bottom of the element, so when the browser window is not wide enough the video is letterboxed and the controls aren't near the bottom of the video.

DOOOOOOH. Setting background: Black explains this all.