Skip to content

fix : video has extra black height above and below#569

Open
BaskarMitrah wants to merge 2 commits intostagefrom
iframe-blank-issue
Open

fix : video has extra black height above and below#569
BaskarMitrah wants to merge 2 commits intostagefrom
iframe-blank-issue

Conversation

@BaskarMitrah
Copy link
Copy Markdown
Collaborator

@BaskarMitrah BaskarMitrah commented Mar 25, 2026

@aem-code-sync
Copy link
Copy Markdown

aem-code-sync bot commented Mar 25, 2026 •
edited
Loading

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run PSI checks
  • Re-sync branch
Commits

@aem-code-sync
Copy link
Copy Markdown

aem-code-sync bot commented Mar 25, 2026 •
edited
Loading

Page Scores Audits Google
📱 /express/add-ons/docs/guides/build/advanced-topics/frameworks-libraries-bundling PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
🖥️ /express/add-ons/docs/guides/build/advanced-topics/frameworks-libraries-bundling PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 25, 2026

❌ Test Results

Status: Some tests failed!

🔍 Click to view failed tests 
📁 test/blocks/columns/columns.test.js:

❌ Columns block > Columns > columns-container
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at n.<anonymous> (test/blocks/columns/columns.test.js:29:117)

❌ Columns block > Columns > buttons
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/columns/columns.test.js:100:86
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/columns/columns.test.js:95:50)


📁 test/blocks/embed/embed.test.js:

❌ Could not import your test module. Check the browser logs or open the browser in debug mode for more information.


📁 test/blocks/contributors/contributors.test.js:

❌ Contributors block > contributors > firstDiv
      AssertionError: expected null to exist
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:32:28)

❌ Contributors block > contributors > remove divs without children
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/contributors/contributors.test.js:42:44
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:41:51)

❌ Contributors block > contributors > last update div
      AssertionError: expected '' to equal 'https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md'
      + expected - actual
      
      +https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md
      
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:53:40)

❌ Contributors block > contributors > image list div
      AssertionError: expected null to exist
        at test/blocks/contributors/contributors.test.js:71:27
        at Array.forEach (<anonymous>)
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:69:33)


📁 test/blocks/tab/tab.test.js:

❌ Tab block > Tab Button Structure > tab > button load structure
      AssertionError: expected 'tab-button active' to equal 'tab-button'
      + expected - actual
      
      -tab-button active
      +tab-button
      
      at n.<anonymous> (test/blocks/tab/tab.test.js:60:38)

❌ Tab block > Sub-tabs > sub-tab > attributes
      AssertionError: expected 'subTab1' to equal 'subTab3'
      + expected - actual
      
      -subTab1
      +subTab3
      
      at test/blocks/tab/tab.test.js:135:58
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/tab/tab.test.js:133:23)

Test Coverage Report

Overall Coverage Summary

Metric Percentage Coverage
Statements 60.07% 3405/5668
Branches 85.02% 460/541
Functions 54.58% 113/207
Lines 60.07% 3405/5668

Coverage by File/Directory

File Statements Branches Functions Lines
blocks/accordion 100% 100% 100% 100%
blocks/announcement 76.69% 60% 100% 76.69%
blocks/banner 94.28% 62.5% 100% 94.28%
blocks/cards 94.04% 94.73% 100% 94.04%
blocks/carousel 76.9% 77.77% 75% 76.9%
blocks/code 81.81% 60% 100% 81.81%
blocks/columns 67.78% 76.92% 100% 67.78%
blocks/contributors 83.61% 56% 100% 83.61%
blocks/edition 91.22% 57.14% 100% 91.22%
blocks/fragment 19.37% 100% 0% 19.37%
blocks/image-text 57.5% 55.55% 100% 57.5%
blocks/info 96.87% 100% 100% 96.87%
blocks/info-card 73.86% 30% 100% 73.86%
blocks/info-columns 75% 100% 100% 75%
blocks/list 59.09% 85.71% 100% 59.09%
blocks/mini-resource-card 97.89% 87.5% 100% 97.89%
blocks/product-card 78.57% 94.11% 100% 78.57%
blocks/profile-card 96.29% 100% 100% 96.29%
blocks/site-hero 93.93% 80% 100% 93.93%
blocks/summary 98.36% 88.88% 100% 98.36%
blocks/tab 95.39% 92.3% 100% 95.39%
blocks/table 100% 84.61% 100% 100%
blocks/text 49.01% 83.33% 50% 49.01%
blocks/title 84% 66.66% 100% 84%
components 64% 100% 66.66% 64%
scripts 48.04% 93.08% 42.17% 48.04%

Coverage report generated at 2026-03-25T07:11:28.867Z

@BaskarMitrah BaskarMitrah changed the base branch from stage to main March 25, 2026 08:09
@BaskarMitrah BaskarMitrah changed the base branch from main to stage March 25, 2026 08:09
@melissag-ensemble melissag-ensemble self-requested a review March 25, 2026 13:04
melissag-ensemble
melissag-ensemble requested changes Mar 25, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@melissag-ensemble melissag-ensemble left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Video looks good on the test page. Concerned the CSS rule targets all non-YouTube iframes though - forcing 16:9 globally could break non-video embeds (docs, forms) or videos that aren't 16:9.

A safer approach would be to only apply the aspect ratio when no explicit height is set, or scope it to a video variant class. Can you also test a YouTube iframe and a non-video embed to confirm they're unaffected?

@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 26, 2026

❌ Test Results

Status: Some tests failed!

🔍 Click to view failed tests 
📁 test/blocks/columns/columns.test.js:

❌ Columns block > Columns > columns-container
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at n.<anonymous> (test/blocks/columns/columns.test.js:29:117)

❌ Columns block > Columns > buttons
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/columns/columns.test.js:100:86
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/columns/columns.test.js:95:50)


📁 test/blocks/embed/embed.test.js:

❌ Could not import your test module. Check the browser logs or open the browser in debug mode for more information.


📁 test/blocks/contributors/contributors.test.js:

❌ Contributors block > contributors > firstDiv
      AssertionError: expected null to exist
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:32:28)

❌ Contributors block > contributors > remove divs without children
      AssertionError: expected false to be true
      + expected - actual
      
      -false
      +true
      
      at test/blocks/contributors/contributors.test.js:42:44
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:41:51)

❌ Contributors block > contributors > last update div
      AssertionError: expected '' to equal 'https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md'
      + expected - actual
      
      +https://github.com/AdobeDocs/express-add-ons-docs/commits/main/src/pages/references/index.md
      
      at n.<anonymous> (test/blocks/contributors/contributors.test.js:53:40)

❌ Contributors block > contributors > image list div
      AssertionError: expected null to exist
        at test/blocks/contributors/contributors.test.js:71:27
        at Array.forEach (<anonymous>)
        at n.<anonymous> (test/blocks/contributors/contributors.test.js:69:33)


📁 test/blocks/tab/tab.test.js:

❌ Tab block > Tab Button Structure > tab > button load structure
      AssertionError: expected 'tab-button active' to equal 'tab-button'
      + expected - actual
      
      -tab-button active
      +tab-button
      
      at n.<anonymous> (test/blocks/tab/tab.test.js:60:38)

❌ Tab block > Sub-tabs > sub-tab > attributes
      AssertionError: expected 'subTab1' to equal 'subTab3'
      + expected - actual
      
      -subTab1
      +subTab3
      
      at test/blocks/tab/tab.test.js:135:58
      at NodeList.forEach (<anonymous>)
      at n.<anonymous> (test/blocks/tab/tab.test.js:133:23)

Test Coverage Report

Overall Coverage Summary

Metric Percentage Coverage
Statements 60.07% 3405/5668
Branches 85.02% 460/541
Functions 54.58% 113/207
Lines 60.07% 3405/5668

Coverage by File/Directory

File Statements Branches Functions Lines
blocks/accordion 100% 100% 100% 100%
blocks/announcement 76.69% 60% 100% 76.69%
blocks/banner 94.28% 62.5% 100% 94.28%
blocks/cards 94.04% 94.73% 100% 94.04%
blocks/carousel 76.9% 77.77% 75% 76.9%
blocks/code 81.81% 60% 100% 81.81%
blocks/columns 67.78% 76.92% 100% 67.78%
blocks/contributors 83.61% 56% 100% 83.61%
blocks/edition 91.22% 57.14% 100% 91.22%
blocks/fragment 19.37% 100% 0% 19.37%
blocks/image-text 57.5% 55.55% 100% 57.5%
blocks/info 96.87% 100% 100% 96.87%
blocks/info-card 73.86% 30% 100% 73.86%
blocks/info-columns 75% 100% 100% 75%
blocks/list 59.09% 85.71% 100% 59.09%
blocks/mini-resource-card 97.89% 87.5% 100% 97.89%
blocks/product-card 78.57% 94.11% 100% 78.57%
blocks/profile-card 96.29% 100% 100% 96.29%
blocks/site-hero 93.93% 80% 100% 93.93%
blocks/summary 98.36% 88.88% 100% 98.36%
blocks/tab 95.39% 92.3% 100% 95.39%
blocks/table 100% 84.61% 100% 100%
blocks/text 49.01% 83.33% 50% 49.01%
blocks/title 84% 66.66% 100% 84%
components 64% 100% 66.66% 64%
scripts 48.04% 93.08% 42.17% 48.04%

Coverage report generated at 2026-03-26T06:07:29.723Z

melissag-ensemble
melissag-ensemble requested changes Mar 26, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@melissag-ensemble melissag-ensemble left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should close this PR - the issue is with the content, not the iframe block. The markdown is using a raw <iframe> tag which doesn't go through the block decorator, so the CSS changes here won't apply.

Image Image

The fix is to use the embed block instead, which already handles MP4s correctly.

Image

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

Reviewers

@melissag-ensemble melissag-ensemble melissag-ensemble requested changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@BaskarMitrah @melissag-ensemble