feature(global-cta-modal-implementation): Global CTA Video Modal.

[nimithshetty17]

Issue

Fixes #MERATIVE-858

Description

We need to ensure that all of the button styles (e.g.. Primary, Secondary, Tertiary) (see - https://main--merative2--hlxsites.hlx.page/block-library/buttons/buttons-video) can support video modal when the href is defined as a video type.

Changed

• Figma Link - https://www.figma.com/file/vw24IPXXt4vCh9BNumka9A/Web--Merative-Digital-Design-System-2.0?type=design&node-id=272-62&mode=design&t=AV0llNTB4XL0rh71-0

Test URLs

• Before (Changes from main): https://main--merative2--nimithshetty17.hlx.page/block-library/buttons/buttons-all
• After (Changes from this PR): https://global-cta-modal-implementation--merative2--nimithshetty17.hlx.page/block-library/buttons/buttons-all

Testing Instruction

To test if the video player is opening a modal for all the button and link styles.

[aem-code-sync[bot]]

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]]

Page	Scores	Audits	Google
/block-library/buttons/buttons-video

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/block-library/buttons/buttons-video

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/block-library/buttons/buttons-video

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/block-library/buttons/buttons-all

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/block-library/buttons/buttons-all

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/block-library/buttons/buttons-all

[proeung]

@nimithshetty17 I decided to revert this PR from the main branch due to some of the 404 errors in the console log (see attached). Looks like the video model gets added to every block element (https://github.com/hlxsites/merative2/pull/335/files#diff-a5ee87ff9063f921ba01933977e6164e5729551986030f0ed7eb747bcffb740fR727), which tells the the loadBlock function to build and load in the blocks (https://github.com/hlxsites/merative2/blob/main/scripts/lib-franklin.js#L349) for classes .video-modal-overlay and .video-modal-container.

You might need to adjust your approach to appending the video overlay outside of the main HTML tag and append the video embed onClick.

Let's open a new PR for this work and include that fix that eliminates the 404 error in the console log.