1264750 - FF v 45.0.1 on Windows 7: HTML5 video always shows full dimension and does not scale to the container's width in responsive design

Status: UNCONFIRMED

(Core :: Audio/Video: Playback, defect, P3)

Description

[Y]

Attachment: FF issue.jpg

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36

Steps to reproduce:

On my responsive page, I have an HTML5 video as:

<video autoplay="" muted="" loop="" poster="/c/dam/assets/ltc/home/anthem-1440.jpg"><source src="/c/dam/assets/home/video/anthem-1440.ogv" type="video/ogv"> <source src="/c/dam/assets/home/video/anthem-1440.webm" type="video/webm"> <source src="/c/dam/assets/home/video/anthem-1440.mp4" type="video/mp4"></video>


Actual results:

While the video plays in Firefox, it always shows at full video size (in my case 1440px by 810px) and doesn't respect the width of the containers).  So, the video extends all the way to the right passing the right edge of the container and causes the horizontal scroll bar to appear.
If I style the <video> to have width of 100%, the video is contained within the container.  But this breaks my responsive design because the video doesn't fill the height of the container.


Expected results:

The video should scale to and contain within the width of the container.
The same page behave correctly in latest Chrome and IE.  That is the video scale properly within the container and fills the width and height of the container as the width of the browser is resized.

Comment 1

[Y]

Btw, the same page was working fine in FF v 44.x

Comment 2

[Y]

Also the container for the video has 1440px max-width, and 700px hihgt (always) for viewport at 960px and larger.

Comment 3

[Y]

for viewport at 960px width and wider.

Comment 4

[Loic]

Could you attach a testcase (or provide a live testcase).

Comment 5

[Anthony Jones (:ajones, :kentuckyfriedtakahe, :k17e)]

Is this issue reproducible on WebM or MP4?

Comment 6

[Y]

yes it is reproducible on MP4.
However, the more I play with video in FF (latest), Chrome (latest) and IE11/Edge, the less I'm sure if it's a bug in Firefox.  Maybe FF just chose a different approach to handling video when the ratio of the container changes.
Here is what I mean, I have a video with dimension at 1440px by 810px and when I have something like this:
<div class="container" style="width: 1440px">
<video>
<source src="anthem-1440.ogv" type="video/ogv"> 
<source src="anthem-1440.webm" type="video/webm"> 
<source src="anthem-1440.mp4" type="video/mp4">
</video>
</div>
Where the container has a fixed height of 700px, and I style the <video> tag and give it a width of 100% height auto, all three browsers behave the same.  That is as I re-size the browser, the video always keep its ratio regardless of the ration of the container.  So, the container is not always covered with video.  But at least it's always contained with the width of the browser (most of the time below 1440px.)
But that's not what I want for my design.  So I remove the width style from the video, when my browser' width is anything below 1440px, while the height of the container is filled with the video's contain, the width in Firefox blows out side way to its natural width, even beyond the container and causes the horizontal bar to appear. This is what depicted in the image I uploaded when I created this ticket.
Whereas, in Chrome and IE, the video always cover the height and width of the container and always is contained (no side way over-extension beyond the container).  As I re-size the browser, the video is either cropped (dragging the browser width to make it narrower) or revealed more (as the browser is widen).  This behavior satisfies my design.
I'm not sure if I explained the use-case clearly enough for you to test/verify.  But after the crunch time of my current project, I'll create a page with the behavior I'm describing here and update this ticket.
Thank you!

Comment 7

[Anthony Jones (:ajones, :kentuckyfriedtakahe, :k17e)]

(In reply to Y from comment #6)
 I'm not sure if I explained the use-case clearly enough for you to
> test/verify.  But after the crunch time of my current project, I'll create a
> page with the behavior I'm describing here and update this ticket.

Any update?

Comment 8

[Anthony Jones (:ajones, :kentuckyfriedtakahe, :k17e)]

Mass change P2 -> P3

Comment 9

[Michael Froman [:mjf]]

No response to NI for 3 years, clearing NI.