fix(video): aligned to design & addressed youtube loading issue

sahmad-merative commented 11 months ago

Multiple Youtube video issue fixes

Issue

UI fixes : fonts, Spacing, and alignments of text and image fixes

Add multiple YouTube videos on a page (I have added few videos on https://main--merative2--sahmad-merative.hlx.page/drafts/saad/leadspace-test).
Play any one of the videos in a modal (popup).
Close the modal before the video finishes playing.
Open another video modal that contains a different YouTube video.
Notice that the video from the previous modal resumes playing in the background from the point where the first modal was closed.

Fixes # MERATIVE-784 MERATIVE-796

Description

aligned design according to figma fixed multiple youtube video on a page issue

Design Specs

Figma Link -https://www.figma.com/file/vw24IPXXt4vCh9BNumka9A/Web--Merative-Digital-Design-System-2.0?type=design&node-id=1641%3A13366&mode=design&t=leAsxbNftxoq6gTd-1

Test URLs

Before (Changes from main): https://main--merative2--hlxsites.hlx.page/block-library/blocks/video
After (Changes from this PR):https://784-video-promo--merative2--sahmad-merative.hlx.page/drafts/saad/leadspace-test
https://784-video-promo--merative2--sahmad-merative.hlx.page/block-library/blocks/video

Testing Instruction

If applicable, please describe the tests that you ran to verify your changes. Provide instructions and link to the hlx deploy preview so that QA and the design team can provide proper testing.

aem-code-sync[bot] commented 11 months ago

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.

[ ] Re-run PSI Checks

aem-code-sync[bot] commented 11 months ago

Page	Scores	Audits	Google
/block-library/blocks/video
/drafts/saad/leadspace-test

proeung commented 11 months ago

@sahmad-merative Just a couple of notes before I start to review this PR.

Please make sure you have the proper title for the PR. Currently, it's set to 784 video promo and it needs to be descriptive and follows the conventional commit message format (eg. fix(video): aligned to design & addressed youtube loading issue
Make sure the PR description area has a proper change list.
Provide testing instruction for QA (@sharathmrft ) and stakeholders (@keith-kaplan) - See example here - https://github.com/hlxsites/merative2/pull/302#issue-1825111151