Problem/Motivation

Media video files (but not remote video files) use the FileVideoFormatter.

This formatter's settings form includes options to set width and height attributes on the <video> element.
These fields are correctly set to be numeric- however they are both marked required. This means any displayed video will have these same fixed dimensions, regardless of an individual video's actual dimensions.

Although the video width can still be controlled with css, these fixed attributes can cause problems like extra white space between the video and the controls when the set size is a different aspect ratio than the video.

FileVideoFormatter was added in #1174892: File field formatters for rich media display with <video> and <audio> HTML5 elements.

Steps to reproduce

  1. Visit the Manage Display page for a Video Media type. admin/structure/media/manage/video/display
  2. Edit the Format settings by clicking the cog.
  3. Width and Height are both required.

Proposed resolution

Remove the #required attribute from both width and height in the settingsForm
core/modules/file/src/Plugin/Field/FieldFormatter/FileVideoFormatter.php

This will allow a browser to display a video at its natural aspect ratio.

  • If neither dimension is provided, the video will be rendered in its original aspect ratio.
  • If only width or height is provided, the video will use that dimension.
  • If both width and height are provided, the video will be rendered with those dimensions.

Remaining tasks

User interface changes

Allows users to leave the width and height blank for a video

Before

https://www.drupal.org/files/issues/2024-02-01/Beforepatch_dimentionfield.png

After

https://www.drupal.org/files/issues/2024-02-01/Afterpatch_dimentionfield.png

API changes

NA

Data model changes

NA

Release notes snippet

NA

Issue fork drupal-3245446

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

zrpnr created an issue. See original summary.

zrpnr’s picture

Component: media system » file.module
zrpnr’s picture

StatusFileSize
new883 bytes

This patch removes the #required attributes from width and height in the settings form.
These attributes are not checked in FileVideoFormatterTest so that should still pass.
I didn't see anywhere else that this formatter was being tested but maybe testbot will catch something...

cilefen’s picture

Status: Active » Needs review
schillerm’s picture

Tested this on 9.3.x-dev site, went to /admin/structure/media/manage/video/display was able to reproduce problem (width and height required).
Applied #3 patch went back to same page .. width and height no longer mandatory. Emptied width and height values and saved changes, no error messages. Uploaded a test video and made a view for it, changed width and height all seems ok. Ran similar tests with a video on article page, all fine. Can see #required attribute has gone from settingsForm() in FileVideoFormatter.php.

schillerm’s picture

Status: Needs review » Reviewed & tested by the community
alexpott’s picture

Status: Reviewed & tested by the community » Needs work

I think we need to fix \Drupal\file\Plugin\Field\FieldFormatter\FileVideoFormatter::settingsSummary() to deal with this not being set and also \Drupal\file\Plugin\Field\FieldFormatter\FileVideoFormatter::prepareAttributes(). I think we should only set the attributes if they are set. It would be good to test the HTML outputted by the file formatter when only width or height is set and when neither is set.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

dww made their first commit to this issue’s fork.

dww’s picture

I just ran into this for a client. I opened an MR, committed #3 as the first commit, and pushed another commit to address most of @alexpott's concerns in #7. Doesn't expand test coverage, so tagging for that.

dww’s picture

Saving credit for authors (myself and @zrpnr) and reviewers (@schillerm and @alexpott).

guiu.rocafort.ferrer made their first commit to this issue’s fork.

guiu.rocafort.ferrer’s picture

Status: Needs work » Needs review
Issue tags: -Needs tests

I added an additional functional test, checking that the width and height attributes are missing when the formatter settings have a null value in the width and height attributes.

I am removing the Needs tests tag, and changing the status to needs review.

smustgrave’s picture

Status: Needs review » Needs work

MR appears to have a failure.

guiu.rocafort.ferrer’s picture

The pipeline error seems to be related to this other issue ( https://www.drupal.org/project/drupal/issues/3401988 ) and not with the merge request itself. The branch itself is mergeable, though.

Should we still merge the code back to the project ? Or should we make the pipeline run correctly first ?

IMO, this is a really small change, and it also have associated tests, so it should be safe to just accept the merge request.

The second option might require to merge the changes back to the issue branch, so the pipeline is updated with the fix from the issue, and then, push so it runs without hitting the error ? I am not completely sure about this.

Akhil Babu made their first commit to this issue’s fork.

akhil babu’s picture

I have added one more test to validate the HTML outputted by the file formatter when only width or height is set.

Akhil Babu changed the visibility of the branch 11.x to hidden.

akhil babu’s picture

Status: Needs work » Needs review

Moving back to needs review

akhil babu’s picture

Status: Needs review » Needs work

Sadly, there is a failed test. Rebasing..

akhil babu’s picture

Status: Needs work » Needs review

All tests passed 🎉

smustgrave’s picture

Status: Needs review » Needs work
Issue tags: +Needs change record, +Needs screenshots

Seems close.

Since this is changing the current field formatter believe we will need a CR with screenshots. Screenshots could be added to the issue summary here too.

kanchan bhogade’s picture

StatusFileSize
new3.96 MB
new4.75 MB
new20.8 KB
new20.29 KB

Hi,
I Have tested the latest MR !5057 on Drupal version 11.0
MR Applied successfully...

Testing steps"

  1. Install the Drupal version 11.x
  2. Install the Media and Media Library core Modules
  3. Go to media types ->video -> manage display ->video types field format -> check for dimension field, it's mandatory
  4. Can check on content also, add video media for any content type, and create content by adding different size videos (video size will be fixed as in format)
  5. Apply MR, and check for the same

Testing Result:
For the Media type -> video ->dimention field not mandatory
It can save black and videos displayed with actual size. Also able to set fixed dimensions as per requirement

Attaching screenshots and videos as #26

akhil babu’s picture

Issue summary: View changes
Status: Needs work » Needs review

Thanks for testing @Kanchan Bhogade.

I have updated the issue summary and created a Draft change record: https://www.drupal.org/node/3418545

shweta__sharma’s picture

Issue tags: -Needs screenshots

Screenshots are added in #27 so removing the tag also I reviewed the CR it seems fine. Leaving it to someone else to review.

smustgrave’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs change record +Needs Review Queue Initiative

CR seems good.

Cleaned up the issue summary as the remaining tasks aren't API changes.

Also screenshots belong in the User interface changes section.

Torn if this is a feature request but will leave as is.

larowlan’s picture

Issue credits

larowlan’s picture

Hiding patch

larowlan’s picture

Status: Reviewed & tested by the community » Needs work

Left some MR comments

guiu.rocafort.ferrer’s picture

Hi @larowlan, thank you for your suggestions.

I changed the formatter summary text, so there is one line for each width / height attribute that has been set.

I also joined the tests for the different cases, only width, only height, both, and none, in the same test method, changing the field config and loading the page again in the same method.

Waiting to see if all the pipelines run smoothly.

guiu.rocafort.ferrer’s picture

I realized the functional test for testing the multiple width, height, both, none cases was wrong.
Fixed that in last commit.

guiu.rocafort.ferrer’s picture

Status: Needs work » Needs review
smustgrave’s picture

Status: Needs review » Reviewed & tested by the community

Feedback appears to be addressed

guiu.rocafort.ferrer’s picture

@smustgrave sorry about that, i will do that in future ocasions. Thanks for pointing that out, i didn't know.

  • larowlan committed 255cd0c7 on 10.3.x
    Issue #3245446 by Akhil Babu, guiu.rocafort.ferrer, dww, zrpnr, Kanchan...

  • larowlan committed bd4cf51b on 11.x
    Issue #3245446 by Akhil Babu, guiu.rocafort.ferrer, dww, zrpnr, Kanchan...
larowlan’s picture

Version: 11.x-dev » 10.3.x-dev
Status: Reviewed & tested by the community » Fixed

Committed to 11.x and backported to 10.3.x
Published CR

wim leers’s picture

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.