[Ready] Add video embeds of course to docs

[stichbury]

Description

Added a sphinx extension to embed youtube video into the docs
Added some video into the early parts of the docs (introduction and spaceflights tutorial)
Take a look at e.g. https://kedro--3542.org.readthedocs.build/en/3542/tutorial/spaceflights_tutorial.html for how I have done it.

Development notes

Rebuilt and inspected but I need to see what this looks like on mobile.

Also @noklam @astrojuanlu are there any videos in particular that you want to include? Please let me know where you want them added? Some are quite difficult to place because the video doesn't totally match up to the way the tutorial explains things (the notebook usage at the start is not linear with the narrative we use in the text for spaceflights). Happy for you to just drop in the videos where you think they best fit -- you'll see the syntax and it's very straightforward. Best to have a consistent "Watch the video" subhead before you include the video too.

Developer Certificate of Origin

We need all contributions to comply with the Developer Certificate of Origin (DCO). All commits must be signed off by including a Signed-off-by line in the commit message. See our wiki for guidance.

If your PR is blocked due to unsigned commits, then you must follow the instructions under "Rebase the branch" on the GitHub Checks page for your PR. This will retroactively add the sign-off to all unsigned commits and allow the DCO check to pass.

Checklist

• Read the contributing guidelines
• Signed off each commit with a Developer Certificate of Origin (DCO)
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added a description of this change in the RELEASE.md file
• Added tests to cover my changes
• Checked if this change will affect Kedro-Viz, and if so, communicated that with the Viz team

[stichbury]

Hmm, I've just checked this and it's not responsive to mobile (well not to iPhone 13 mobile safari). That's not ideal. The iframe way of doing things I used in 0.17 was better than this because it was a hard-coded width, which I could also do with this extension so I shall adjust for that:

<iframe width="560" height="315" style="max-width: 100%" src="https://www.youtube.com/embed/dRnCovp1GRQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[stichbury]

Added @tynandebold to reviewer list to confirm that the best way to make including a youtube embed and making it responsive to screen size is to use a % size in the embed. Tynan, I know you're probably not familiar with the sphinx extension itself but I'm assuming using relative width is standard practice in front-end code?

[noklam]

Looks pretty good to me!

[tynandebold]

Tynan, I know you're probably not familiar with the sphinx extension itself but I'm assuming using relative width is standard practice in front-end code?

This is correct, or a percentage width, to be precise. It seems like the extension is handling all of that? It looks really good to me.

Approving with one small comment about the 90% width.

[astrojuanlu]

Left a few comments! Overall I think this is a great start, don't think we have to complicate it much more