Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Video Block: Prevent fullscreen video cropping #67030

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Video Block: Prevent fullscreen video cropping #67030

wants to merge 1 commit into from

Conversation

himanshupathak95
Copy link
Contributor

@himanshupathak95 himanshupathak95 commented Nov 15, 2024 •
edited
Loading

Fixes: #67027

What?

This PR resolves an issue where videos in fullscreen mode may appear cropped due to the object-fit: cover style applied to video elements. The style for fullscreen videos has been overridden with object-fit: contain, ensuring the video maintains its aspect ratio and fits the screen dimensions.

Why?

This fix is necessary to address a usability issue where video content in fullscreen mode is partially cropped. The cropping occurs because the current styles apply object-fit: cover to video elements, including those displayed in fullscreen mode.

Testing Instructions

  1. Open a page or post containing a video block with a poster image.
  2. Play the video and click the fullscreen button.
  3. Observe that the video expands to fullscreen without being cropped, maintaining its original aspect ratio when doing
    object-fit: contain but gets cropped a little when doing object-fit: cover.

Screencast

With object-fit: cover;

with-cover.mov

With object-fit: contain;

with-contain.mov

@himanshupathak95
Video Block: Prevent fullscreen video cropping
a06a043 
This fix ensures videos in fullscreen mode maintain their aspect ratio without cropping. The `object-fit: cover` style for video elements has been overridden in fullscreen mode with `object-fit: contain`.
@github-actions GitHub Actions
Copy link

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions GitHub Actions
Copy link

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Nov 15, 2024
@github-actions GitHub Actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @himanshupathak95! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Video Block: Full screen video may be cropped
1 participant
@himanshupathak95