Cover Block: Enable fixed background support for videos#74512
Cover Block: Enable fixed background support for videos#74512saurabh-G07 wants to merge 1 commit intoWordPress:trunkfrom
Conversation
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @saurabh-G07. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @saurabh-G07! 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. |
PR Description: Cover Block - Enable Fixed Background for Videos
Related Issue: #52585
Description
This Pull Request extends the "Fixed background" (parallax) functionality to the Cover block when a Video is selected as the background media. Previously, this feature was only available for Images.
Implementation Details
Unlike images, which utilize
background-attachment: fixedon a containerdiv, video elements (<video>) do not support this CSS property.To achieve feature parity, this PR implements a solution using:
position: fixedon the<video>element to anchor it to the viewport.clip-path: inset(0)on the parent.wp-block-covercontainer. This ensures the fixed video is correctly "clipped" to the block's area as the user scrolls, replicating thebackground-attachmentbehavior.Changes
isVideoBackgroundis true.has-parallaxclass to the<video>element when the attribute is set.video.has-parallax(usingposition: fixed) and the container (usingclip-path).Testing Instructions
Checklist:
Types of changes