Add Video block

[rhudea]

Please always provide the GitHub issue(s) your PR is for, as well as test URLs where your change can be observed (before and after):

Fix #27

Test URLs:

• Before: https://main--macquarie-help-centre--hlxsites.hlx.page/
• After: https://video--macquarie-help-centre--hlxsites.hlx.page/help/personal/home-loans/manage-repayments-and-interest-rate/your-home-loan-interest

[aem-code-sync[bot]]

Hello, I'm the AEM Code Sync 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
/personal/home-loans/manage-repayments-and-interest-rate/your-home-loan-interest

[volteanu]

The video-wrapper should match the width of default-content-wrapper (width: calc(100% * 2/3);). Right now it expands to 100% in desktop mode.

Not sure how best we can achieve it, especially that this will change with the "long article" styling...

[volteanu]

🐛 Clicking outside of the modal restarts the video instead of closing it.

[volteanu]

🐛 click on the X to close the video triggers a js error in the console:

Uncaught TypeError: player?.stopVideo is not a function
    at toggleVideoOverlay (video.js:82:15)
    at HTMLDivElement.<anonymous> (video.js:197:45)

[volteanu]

The "Watch now" button should be aligned with the bottom-left corner in mobile mode, i.e.:

Currently there's some padding (from the desktop view):

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/personal/home-loans/manage-repayments-and-interest-rate/your-home-loan-interest

[asthabh23]

The video-wrapper should match the width of default-content-wrapper (width: calc(100% * 2/3);). Right now it expands to 100% in desktop mode.

Not sure how best we can achieve it, especially that this will change with the "long article" styling...

I agree on this, the width of the video wrapper needs to match the width of default content (for now, its full width almost)

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/personal/home-loans/manage-repayments-and-interest-rate/your-home-loan-interest

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/personal/home-loans/manage-repayments-and-interest-rate/your-home-loan-interest		Lighthouse returned error: ERRORED_DOCUMENT_REQUEST. Lighthouse was unable to reliably load the page you requested. Make sure you are testing the correct URL and that the server is properly responding to all requests. (Status code: 404)

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/personal/home-loans/manage-repayments-and-interest-rate/your-home-loan-interest		Lighthouse returned error: ERRORED_DOCUMENT_REQUEST. Lighthouse was unable to reliably load the page you requested. Make sure you are testing the correct URL and that the server is properly responding to all requests. (Status code: 404)

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/personal/home-loans/manage-repayments-and-interest-rate/your-home-loan-interest		Lighthouse returned error: ERRORED_DOCUMENT_REQUEST. Lighthouse was unable to reliably load the page you requested. Make sure you are testing the correct URL and that the server is properly responding to all requests. (Status code: 404)

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/help/personal/home-loans/manage-repayments-and-interest-rate/your-home-loan-int erest

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/help/personal/home-loans/manage-repayments-and-interest-rate/your-home-loan-int erest

[asthabh23]

@rhudea , customer confirmed that they just need inline support for videos. you could update the same in this PR itself

[rhudea]

Close in favor #84