Update the embed block to be a custom video embed that uses the design system video embed template

[helenb]

What is the context of this PR?

See https://jira.ons.gov.uk/browse/CMS-204

• Adds a custom VideoEmbedBlock, whose fields match the requirements of the design system video block template (https://service-manual.ons.gov.uk/design-system/components/video#example.example-video.nunjucks-macro-options).
• Adds validation to ensure that the embed and link urls are from the vimeo and youtube domains.
• Adds tests for the validation.
• Removes the custom CSS to make the video embed responsive, which is no longer required now that we are using the design system template.

How to review

• Check out the branch on your local build
• Edit or create an information page
• Add a Video embed block to the body.
• Example vimeo link urls:
  • https://vimeo.com/908205163?share=copy
  • https://player.vimeo.com/video/908205163
  • https://vimeo.com/showcase/7934865/video/493407585
• Example youtube link urls:
  • https://www.youtube.com/watch?v=ywzZXO-A7Pg&foo=bar
  • https://youtu.be/ywzZXO-A7Pg
  • https://www.youtube.com/v/ywzZXO-A7Pg
• The following links are all invalid and should give you a warning:
  • https://ons.gov.uk/908205163
  • https://www.youtube.com/watch/foo?v=ywzZXO-A7Pg
  • https://youtu.be/something/ywzZXO-A7Pg
  • https://www.youtube.com/v/foo/bar/ywzZXO-A7Pg
  • https://vimeo.com/foo/bar/908205163
  • https://player.vimeo.com/video/test/908205163
  • https://vimeo.com/showcase/7934865/foo/493407585
• Test in a browser window where you have accepted cookies, and one where you have not.
  • Where you haven't accepted cookies, you'll see the preview image, with a link below to open the video in a new tab
  • Where you have accepted cookies, you'll see the video embedded in your browser.
• Test with an invalid domain for the link url, and ensure you see a warning message

Screenshots

Click to expand

With cookies accepted

Without cookies accepted

Follow-up Actions

[zerolab]

Added a couple of quick thoughts

[nehakerung]

LGTM - just did a functional tests and all works as mentioned 🎉

Adding a preview image might be tedious, but since it's DS compliant, I'll ignore it.🫡

[helenb]

LGTM - just did a functional tests and all works as mentioned 🎉

Adding a preview image might be tedious, but since it's DS compliant, I'll ignore it.🫡

Thanks @nehakerung!

[nehakerung]

LGTM

[AdamHawtin]

Looks good to me, just a suggestion for the unit tests.

[sanjeevz3009]

LGTM =) Tested everything and exhausted all the blocks on the info page and everything is working as it should.