Video thumbnail extends beyond mobile screen width on File pages
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	Ijon
	Sep 22 2021, 8:33 PM

Description

List of steps to reproduce (step by step, including full links if applicable):

visit the following page on an Android device of 360px width: https://commons.m.wikimedia.org/wiki/File:%D0%A7%D0%B5%D1%80%D0%BD%D1%96%D0%B2%D0%B5%D1%86%D1%8C%D0%BA%D0%B8%D0%B9_%D0%BD%D0%B5%D0%BA%D1%80%D0%BE%D0%BF%D0%BE%D0%BB%D1%8C._%D0%9D%D0%B0%D0%B9%D0%B1%D1%96%D0%BB%D1%8C%D1%88%D0%B8%D0%B9_%D1%83_%D0%84%D0%B2%D1%80%D0%BE%D0%BF%D1%96_%D1%94%D0%B2%D1%80%D0%B5%D0%B9%D1%81%D1%8C%D0%BA%D0%B8%D0%B9_%D1%86%D0%B2%D0%B8%D0%BD%D1%82%D0%B0%D1%80.webm

notice the video thumbnail extends way off the screen instead of being scaled to fit.
in particular, notice the the Play button is off-screen, seriously affecting usability.

I suspect the WLM banner is somehow at fault.

See screenshots:

Screenshot_20210922_232404_com.android.chrome.jpg (2×1 px, 720 KB)

Screenshot_20210922_232413_com.android.chrome.jpg (2×1 px, 702 KB)

Screenshot_20210922_232351_com.android.chrome.jpg (2×1 px, 707 KB)

Details

	Subject	Repo	Branch	Lines +/-
	Do not set height:auto on audio elements	mediawiki/extensions/TimedMediaHandler	master	+0 -1
	Fix mwembed overflow on mobile	mediawiki/extensions/TimedMediaHandler	master	+17 -1

Customize query in gerrit

Related Objects

Mentioned In: T62565: TMH totally broken on mobile

Event Timeline

Ijon created this task.Sep 22 2021, 8:33 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 22 2021, 8:33 PM

Antanana subscribed.Sep 22 2021, 8:37 PM

Base subscribed.Sep 22 2021, 9:07 PM

the same seems to be the case for images as well.

https://commons.m.wikimedia.org/wiki/File:FvfBulusanSanMiguelPRiverCalumpit9728_24.JPG

Jdlrobson added a project: TimedMediaHandler.Sep 23 2021, 1:12 AM

TheDJ renamed this task from Video thumbnail extends beyond mobile screen width to Video thumbnail extends beyond mobile screen width on File pages.Sep 23 2021, 11:10 AM

Images are made responsive on mobile using:

.content a > img, .content noscript > img {
max-width: 100% !important;
height: auto !important;
}

That doesn't work for

<div class="mediaContainer" style="width:800px">
<video id="mwe_player_0" poster="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/%D0%A7%D0%B5%D1%80%D0%BD%D1%96%D0%B2%D0%B5%D1%86%D1%8C%D0%BA%D0%B8%D0%B9_%D0%BD%D0%B5%D0%BA%D1%80%D0%BE%D0%BF%D0%BE%D0%BB%D1%8C._%D0%9D%D0%B0%D0%B9%D0%B1%D1%96%D0%BB%D1%8C%D1%88%D0%B8%D0%B9_%D1%83_%D0%84%D0%B2%D1%80%D0%BE%D0%BF%D1%96_%D1%94%D0%B2%D1%80%D0%B5%D0%B9%D1%81%D1%8C%D0%BA%D0%B8%D0%B9_%D1%86%D0%B2%D0%B8%D0%BD%D1%82%D0%B0%D1%80.webm/800px--%D0%A7%D0%B5%D1%80%D0%BD%D1%96%D0%B2%D0%B5%D1%86%D1%8C%D0%BA%D0%B8%D0%B9_%D0%BD%D0%B5%D0%BA%D1%80%D0%BE%D0%BF%D0%BE%D0%BB%D1%8C._%D0%9D%D0%B0%D0%B9%D0%B1%D1%96%D0%BB%D1%8C%D1%88%D0%B8%D0%B9_%D1%83_%D0%84%D0%B2%D1%80%D0%BE%D0%BF%D1%96_%D1%94%D0%B2%D1%80%D0%B5%D0%B9%D1%81%D1%8C%D0%BA%D0%B8%D0%B9_%D1%86%D0%B2%D0%B8%D0%BD%D1%82%D0%B0%D1%80.webm.jpg" controls="" preload="none" style="width:800px;height: auto !important;max-width: 100% !important;display: block;" class="kskin" data-durationhint="255.16">
[..]
</video></div>

This has always been the case on File pages.
Not sure why you are seeing it on an image, might be that that specific banner ALSO doesn't deal well with restricted widths (or the file information tables), but that's secondary then.

This is resolved when using the video.js output mode, so if this doesn't get fixed on mwembed mode earlier we'll be able to move it off the table after that rolls out.

• brooke triaged this task as Low priority.Jan 12 2022, 6:06 PM

• brooke moved this task from To sort to Backlog/maint on the TimedMediaHandler board.

Change 753570 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/TimedMediaHandler@master] Fix mwembed overflow on mobile

https://gerrit.wikimedia.org/r/753570

gerritbot added a project: Patch-For-Review.Jan 12 2022, 10:36 PM

Change 753570 merged by jenkins-bot:

[mediawiki/extensions/TimedMediaHandler@master] Fix mwembed overflow on mobile

https://gerrit.wikimedia.org/r/753570

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.18; 2022-01-17).Jan 13 2022, 4:00 PM

TheDJ closed this task as Resolved.Jan 13 2022, 4:09 PM

TheDJ claimed this task.

Maintenance_bot removed a project: Patch-For-Review.Jan 13 2022, 4:10 PM

Change 756125 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/TimedMediaHandler@master] Do not set height:auto on audio elements

https://gerrit.wikimedia.org/r/756125

gerritbot added a project: Patch-For-Review.Jan 22 2022, 7:29 PM

TheDJ mentioned this in T62565: TMH totally broken on mobile.Jan 22 2022, 7:38 PM

Change 756125 merged by jenkins-bot: