Add YouTube callouts to relevant docs pages

docs/api/csf.md

@@ -2,6 +2,8 @@
 title: 'Component Story Format (CSF)'
 ---
 
+<YouTubeCallout id="uH9_dfc-6Kc" title="Test components the EASY way | Component Story Format 3" />
+
 Component Story Format (CSF) is the recommended way to [write stories](../writing-stories/introduction.md). It's an [open standard](https://github.com/ComponentDriven/csf) based on ES6 modules that is portable beyond Storybook.
 
 <div class="aside">

docs/essentials/controls.md

@@ -2,6 +2,8 @@
 title: 'Controls'
 ---
 
+<YouTubeCallout id="vAh0KdRcXpI" title="How to connect props with Storybook controls" />
+
 Storybook Controls gives you a graphical UI to interact with a component's arguments dynamically without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live.
 
 <video autoPlay muted playsInline loop>

docs/essentials/measure-and-outline.md

@@ -2,6 +2,8 @@
 title: 'Measure & outline'
 ---
 
+<YouTubeCallout id="-S7GtH0hdc4" title="Debug CSS without DevTools — Storybook" />
+
 Storybook's [Measure](https://storybook.js.org/addons/@storybook/addon-measure/) and [Outline](https://storybook.js.org/addons/@storybook/addon-outline) addons give you the necessary tooling to inspect and visually debug CSS layout and alignment issues within your stories. It makes it easy to catch UI bugs early in development.
 
 ## Measure addon

docs/essentials/toolbars-and-globals.md

@@ -2,6 +2,8 @@
 title: 'Toolbars & globals'
 ---
 
+<YouTubeCallout id="DuJ_gmSncLM" title="Create custom toolbar items using global types" />
+
 Storybook ships with toolbar addons to control the [viewport](./viewport.md) and [background](./backgrounds.md) the story renders in. You can also create your own toolbar items which control special “globals” which you can then read to create [decorators](../writing-stories/decorators.md) to control story rendering.
 
 ## Globals

docs/essentials/viewport.md

@@ -2,6 +2,8 @@
 title: 'Viewport'
 ---
 
+<YouTubeCallout id="uydF1ltw7-g" title="Stop resizing your browser — Storybook viewport" />
+
 The Viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. It makes it easy to develop responsive UIs.
 
 <video autoPlay muted playsInline loop>

docs/writing-stories/play-function.md

@@ -2,6 +2,8 @@
 title: 'Play function'
 ---
 
+<YouTubeCallout id="dcuzwCHI940" title="Component testing in Storybook with play functions" />
+
 `Play` functions are small snippets of code executed after the story renders. Enabling you to interact with your components and test scenarios that otherwise required user intervention.
 
 ## Setup the interactions addon