Add a video demonstration to the Quick Start Guide

[ndiego]

This PR adds a video demonstration that walks the viewer through the steps in the Quick Start Guide.

The implementation is not ideal, but it works. When docs are synced to developer.wordpress.org/block-editor, the content is wrapped in a Freeform block (Classic Editor). It's not actually converted into a block. This is something that we can explore improving in the future.

Therefore, the YouTube video (hosted as an unlisted video on the WordPress YT channel) cannot use the Embed block and needs some additional markup to maintain its aspect ratio and be responsive. The finished product will look like this:

You can view the video directly here: https://www.youtube.com/watch?v=nrut8SfXA44

[juanmaguitar]

LGTM! ✅

[ndiego]

I just want to note that this approach did not work. The iframe is getting stripped from the post content when the page is updated. I have manually converted the page to blocks to get the video to display and am investigating a more permanent solution.

[adamwoodnz]

@ndiego security concerns make using iframe undesirable, could you try using the Jetpack YouTube shortcode? See WordPress/wordpress.org#188 (comment)

[dd32]

We probably want to keep the iframe in these docs, and just have the blocks markdown importer on WordPress.org convert it to an embed block or shortcode.

[adamwoodnz]

Yes just discovered why Jetpack isn't doing this, there's a setting which needs to be enabled:

It appears to work locally with the markup you've added @ndiego, converting the iframe embed to a shortcode, and then back to an iframe embed on the frontend.

Imported content

Frontend

The div with padding you've added to enlarge the video doesn't work due to a nested span, but we could add theme styles for this.

I propose we turn on the setting, remove the div from the embed code, and allow the cron to roll out the shortcode. Thoughts?

[ndiego]

That sounds great @adamwoodnz. I will draft another PR with this update. Thanks!