935351 - Embedded video overlaps ToC at some widths

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Design, defect)

Description

[Will Bamberg [:wbamberg]]

See https://developer.mozilla.org/en-US/docs/Tools/Debugger at a page width just wide enough for the ToC to occupy the right-hand column, but not much wider. The video overlaps the ToC. 

I embedded the video using the editor's Youtube button, and used the suggested default size of 640/360.

Comment 1

[Jean-Yves Perrier [:teoli]]

Yeah, the video element is not responsive, it looks that there is a problem with the position we switch layout. (We have the same problem with small screen size, but this is expected and clearly non-blocking).

Ali: this is important to diagnose (and AFAIK will be a small fix), we should block. We may unblock later is the solution is too complex given the small amount of pages affected, but we should diagnose in order to be sure nothing deeper is there.

Will: we have no control over the size of the widget, correct?
David: is there an easy way to make a video element responsive?
Holly: from the UX perspective, do we want a responsive video element, or rather to tweek the limit between the layout switch?

Comment 2

[David Walsh :davidwalsh]

Clearing everyone else's plate on this, I put a PR in for this last night, will get merged today.  Will does have a choice on video size but what he chose is fine.  IFRAME's and VIDEO's now have a max-width of 100%.

Comment 3

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/decfc8288125afbeef3141913fa7d1c6551b275d
fix bug 935351 - Don't allow IFRAME's or videos to be more than 100%

https://github.com/mozilla/kuma/commit/970d8569806de42e25c57eb826b7a75fe361f2df
Merge pull request #1602 from darkwing/video-width-935351

fix bug 935351 - Don't allow IFRAME's or videos to be more than 100%