Page MenuHomePhabricator

Video play button overlay - move to corner
Open, LowPublic

Description

Suggestion to

  • move the play button overlay, into the bottom-left corner (bottom-right in RTL wikis)

Context: The current location obscures the center of the thumbnails, which drastically reduces their aesthetic and functional use as still images.
This has led to videos being moved down from the lead-image position (with actual still images, from the videos, as replacements).
It is also often hard to see the play button, because we've purposefully lowered the contrast due to the overlay being in the center. (cf. T50377: Videos' [Play ▶] center triangle: Improve contrast so it's easier to spot that it's not a still image and T117344: Investigate increasing the contrast for arrows in the multimedia video player )

This was discussed at

It was then discussed in more technical detail at https://en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_16#Improve_appearance_and_utility_of_embedded_video_player_objects
And enabled at enwiki with this code change (which remains the same, today) https://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&diff=634568364&oldid=634568266

/* Move 'play' button of video player to bottom left corner */
.PopUpMediaTransform a .play-btn-large {
    margin: 0;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
}

See also:

Details

Reference
bz73438

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:59 AM
bzimport added a project: TimedMediaHandler.
bzimport set Reference to bz73438.
bzimport added a subscriber: Unknown Object (MLST).

Change 173745 had a related patch set uploaded by Reticulated Spline:
Add ability to move and scale main 'Play' button

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

Gilles triaged this task as Low priority.Nov 24 2014, 1:09 PM
Gilles added a subscriber: Gilles.

Change 173745 had a related patch set uploaded (by Paladox):
Add ability to move and scale main 'Play' button

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

Restricted Application added subscribers: Matanya, Aklapper. · View Herald TranscriptSep 4 2015, 10:28 AM
Paladox set Security to None.Sep 4 2015, 10:29 AM
Jdforrester-WMF moved this task from Untriaged to Backlog on the Multimedia board.Sep 4 2015, 6:08 PM
TheDJ moved this task from Backlog to Player on the TimedMediaHandler board.Oct 21 2015, 7:56 PM
Tgr updated the task description. (Show Details)Nov 1 2015, 5:25 AM
Tgr updated the task description. (Show Details)
Quiddity updated the task description. (Show Details)Feb 23 2016, 12:11 AM

I've edited the details, to fix old links, and specify exactly what CSS enwiki used.

The patchset linked in comments above, is more powerful/complicated, allowing the play button to be located in any of 5 places (center, or corners), plus other features. (See full commit message at https://gerrit.wikimedia.org/r/#/c/173745/ )

Quiddity renamed this task from Video play button overlay - move to corner and increase contrast to Video play button overlay - move to corner.Feb 23 2016, 12:20 AM
Quiddity updated the task description. (Show Details)

@Edokter @Redrose64 @Martijn_Hoekstra Someone from uk.wikipedia was asking about doing the same thing, on IRC today. You covered this at Enwiki - Do you have any thoughts about making it global? Or on using the more complicated patch (linked above) to add options and also cover the button-resizing bug?