Twenty Fourteen: Video play icon alignment

[celloexpressions]

Twenty Fourteen provides custom styling for the MediaElement.js players. It appears that the updates to MediaElement.js in a recent release caused the play icon (which is a Genericons font icon) in embedded video players to become substantially misaligned. This could be seen in the editor or in a video widget with a locally-uploaded video.

This seems to be fixable by adding position: relative to .hentry .mejs-overlay-button, .widget .mejs-overlay-button { in the Twenty Fourteen stylesheet. This allows the icon to be absolutely positioned relative to the button container, as this worked previously.

If someone has time to verify this issue, document screenshots, and turn this into a patch, this should be a relatively straightforward fix.

[chriseverson]

I was able to verify this as an issue. The above patch has the suggested fix, which solves things on the frontend, but will still need updates for the editor. Hoping to have those inbound shortly.

[mmaumio]

Removed the margin from the .mejs-overlay-button for both hentry and widget as it was misaligning the icon from being centered vertically and horizontally. Changed the icon position to relative instead of absolute which the issue creator advised as well.

[mmaumio]

Before Icon Alignment Fix

[mmaumio]

After the fix

[celloexpressions]

Twenty Fourteen is already being updated in 5.0 for Gutenberg, and will likely be touching this code anyway. We need to be better about grouping bundled theme updates - @laurelfulford do you think you can take care of this very small adjustment with the other 5.0 changes?

[laurelfulford]

Copy fix editor styles.

[laurelfulford]

Twenty Fourteen - video in classic editor before.

[laurelfulford]

Twenty Fourteen - video in classic editor after.

[laurelfulford]

Thanks for reporting this issue, @celloexpressions, and for the patches, @chriseverson and @mmaumio! I'm sorry I couldn't get to this earlier in the 5.0 release.

Reviewing the patches, 44664.diff​ looks like it is of a different file (package-lock.json) but video_icon_alignment.diff​ fixes the issue for me on the front-end.

44664.3.patch​ is basically a copy-paste of that fix into the editor styles, so it's fixed there as well. The new block-based editor doesn't currently have MediaElement.js enqueued into it, so you can only see this issue when using the classic editor. However, these styles are also pulled into the block-based editor, so if MediaElement.js is added down the road, it should fix it there too.

[mmaumio]

It's great to hear the issue has been fixed.

Thanks for taking care of it :)

@laurelfulford

[netweb]

Replying to laurelfulford:

44664.3.patch​ is basically a copy-paste of that fix into the editor styles, so it's fixed there as well. The new block-based editor doesn't currently have MediaElement.js enqueued into it, so you can only see this issue when using the classic editor. However, these styles are also pulled into the block-based editor, so if MediaElement.js is added down the road, it should fix it there too.

44664.3.patch​ LGTM

[laurelfulford]

#43509 was marked as a duplicate.

[laurelfulford]

In 44380:

Twenty Fourteen: Correct video play button position.

A change to the MediaElement.js caused Twenty Fourteen's custom video play button to display in the top corner, rather than centered. This update returns it to its correct position.

Props mmaumio, celloexpressions.
Fixes #44664.

[SergeyBiryukov]

In 44421:

Twenty Fourteen: Correct video play button position.

A change to the MediaElement.js caused Twenty Fourteen's custom video play button to display in the top corner, rather than centered. This update returns it to its correct position.

Props mmaumio, celloexpressions.
Merges [44380] to the 5.0 branch.
Fixes #44664.