fix: Video block editor player collapsed to play button (#1891)#1893
Open
subodhr258 wants to merge 1 commit into
Open
fix: Video block editor player collapsed to play button (#1891)#1893subodhr258 wants to merge 1 commit into
subodhr258 wants to merge 1 commit into
Conversation
The GoDAM Video block was rendering as a tiny play button in the block editor after a video was selected. Two issues combined to break the player: 1. The video container was rendered with inline `display: none` until 500ms after Video.js initialised. With the container hidden, Video.js could not measure its parent and initialised with zero dimensions. 2. Video.js writes its fluid aspect-ratio padding rule to the top-level document only. The block editor canvas runs inside an iframe, so the rule never reaches the player and the `.video-js` element kept `padding-top: 0` — leaving only the centred play button visible. Render the video container immediately and stack the loading overlay on top with absolute positioning, then mirror Video.js's fluid padding inline on the player element so the height resolves correctly inside the editor iframe. Adds a proper `.hide` rule on the loading overlay so it actually fades out once the player is ready. Fixes #1891 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes the GoDAM Video block preview collapsing to a tiny play button inside the WordPress block editor by ensuring Video.js can measure a visible container at init time and by applying the fluid aspect-ratio padding within the editor iframe context.
Changes:
- Render the Video.js container immediately (no delayed
display: none) and fade the loading overlay out via a.hideclass. - Mirror Video.js fluid
padding-topinline on the player element to ensure correct height inside the editor canvas iframe. - Update editor styles so the loading overlay is absolutely positioned over the player instead of affecting layout.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| assets/src/blocks/godam-player/VideoJS.js | Ensures the player initializes with correct dimensions in the editor and properly hides the loading overlay. |
| assets/src/blocks/godam-player/editor.scss | Adjusts editor-only styling so the loading overlay layers over the player and can fade out. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+31
to
+34
| const playerEl = player.el_; | ||
| if ( playerEl ) { | ||
| playerEl.style.paddingTop = `${ ( y / x ) * 100 }%`; | ||
| } |
Comment on lines
+81
to
+85
| // Fade the loading overlay out after a short delay so the transition feels smooth. | ||
| setTimeout( () => { | ||
| if ( videoRef.current ) { | ||
| // Hide the video player loading animation | ||
| const parentElement = videoRef.current.parentElement; | ||
|
|
||
| if ( parentElement ) { | ||
| // Remove the child element with class name 'godam-video-loading' | ||
| const childElement = parentElement.querySelector( '.godam-video-loading' ); | ||
| if ( childElement ) { | ||
| childElement.classList.add( 'hide' ); | ||
| } | ||
| } | ||
|
|
||
| videoRef.current.style.display = 'block'; | ||
| if ( ! videoRef.current ) { | ||
| return; | ||
| } |
🔍 WordPress Plugin Check Report
📊 Report
❌ Errors (3)📁 readme.txt (1 error)
📁 lib/class-godam-frappe-dispatch-installer.php (2 errors)
|
| 📍 Line | 🔖 Check | 💬 Message |
|---|---|---|
0 |
mismatched_plugin_name | Plugin name "GoDAM - Organize WordPress Media Library & File Manager with Unlimited Folders for Images, Videos & more" is different from the name declared in plugin header "GoDAM". |
0 |
trademarked_term | The plugin name includes a restricted term. Your chosen plugin name - "GoDAM - Organize WordPress Media Library & File Manager with Unlimited Folders for Images, Videos & more" - contains the restricted term "wordpress" which cannot be used at all in your plugin name. |
📁 composer.json (1 warning)
| 📍 Line | 🔖 Check | 💬 Message |
|---|---|---|
0 |
missing_composer_json_file | The "/vendor" directory using composer exists, but "composer.json" file is missing. |
📁 assets/build/css/main.css (1 warning)
| 📍 Line | 🔖 Check | 💬 Message |
|---|---|---|
0 |
EnqueuedStylesScope | This style is being loaded in all contexts. |
📁 assets/src/libs/analytics.min.js (5 warnings)
| 📍 Line | 🔖 Check | 💬 Message |
|---|---|---|
0 |
EnqueuedScriptsScope | This script is being loaded in all frontend contexts. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880 (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880/2026/05/25/hello-world/ (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880/sample-page/ (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880/demo-attachment-post/ (with handle analytics-library) is loaded in the footer. Consider a defer or async script loading strategy instead. |
📁 assets/build/js/main.min.js (5 warnings)
| 📍 Line | 🔖 Check | 💬 Message |
|---|---|---|
0 |
EnqueuedScriptsScope | This script is being loaded in all frontend contexts. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880 (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880/2026/05/25/hello-world/ (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880/sample-page/ (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead. |
0 |
NonBlockingScripts.NoStrategy | This script on http://localhost:8880/demo-attachment-post/ (with handle rtgodam-script) is loaded in the footer. Consider a defer or async script loading strategy instead. |
🤖 Generated by WordPress Plugin Check Action • Learn more about Plugin Check
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
display: noneuntil 500 ms after Video.js initialised, so Video.js couldn't measure its parent and started up with zero dimensions.padding-toprule to the top-level document. The editor canvas runs in an iframe, so the rule never reached the player and.video-jskeptpadding-top: 0— leaving only the big-play button visible.position: absolute, and mirror Video.js's fluid padding inline on the player element so the height resolves inside the editor iframe. Add a proper.hiderule so the loading overlay actually fades out once the player is ready.Before / After
Verified locally on
subodh-multisite.rt.gwby inserting agodam/videoblock with a sample MP4 source — the player now renders at 645×363 (16:9) and the loading overlay fades cleanly.Test plan
render.php/ frontend JS).Fixes #1891
🤖 Generated with Claude Code