make images local and enhance them with alt text

docs/content-editing/add-a-video-block.md

@@ -16,81 +16,172 @@ Here we show how to add an embedded video block.
 
 2. Click the {guilabel}`Edit` button.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/89feb1a2-af34-47c6-99e9-77427b9ad432/ascreenshot.jpeg?tl_px=0,0&br_px=1719,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=13,33)
-
+   ````{card}
+   ```{image} _static/add-a-video-block-01.jpeg
+   :alt: The Edit button
+   :target: _static/add-a-video-block-01.jpeg
+   ```
+   +++
+   _The Edit button_
+   ````
 
 3. Click in an empty text block.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/b31b1f63-0df8-4b0d-894e-b160a669e42f/ascreenshot.jpeg?tl_px=0,255&br_px=1719,1216&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=496,276)
-
+   ````{card}
+   ```{image} _static/add-a-video-block-02.jpeg
+   :alt: An empty text block
+   :target: _static/add-a-video-block-02.jpeg
+   ```
+   +++
+   _An empty text block_
+   ````
 
 4. Click the {guilabel}`+` button to choose a different type of block.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/21ae2a43-6230-456c-bb7d-8ba52f5a52a9/ascreenshot.jpeg?tl_px=232,309&br_px=1952,1270&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,277)
-
+   ````{card}
+   ```{image} _static/add-a-video-block-03.jpeg
+   :alt: Click to change the block type
+   :target: _static/add-a-video-block-03.jpeg
+   ```
+   +++
+   _Click to change the block type_
+   ````
 
 5. Click {guilabel}`Video`
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/c020b022-8675-49e7-8b84-34e8e5a65c75/ascreenshot.jpeg?tl_px=793,0&br_px=2513,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,214)
-
+   ````{card}
+   ```{image} _static/add-a-video-block-04.jpeg
+   :alt: Add a Video block
+   :target: _static/add-a-video-block-04.jpeg
+   ```
+   +++
+   _Add a Video block_
+   ````
 
 6. Click the {guilabel}`Type a Video (YouTube, Vimeo or mp4) URL` field.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/79330f38-081d-4d16-b5a0-9e4b2dbb0f3d/ascreenshot.jpeg?tl_px=162,614&br_px=1881,1576&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,282)
-
+   ````{card}
+   ```{image} _static/add-a-video-block-05.jpeg
+   :alt: The video web address field
+   :target: _static/add-a-video-block-05.jpeg
+   ```
+   +++
+   _The video web address field_
+   ````
 
 7. Paste or type the web address of the video you want to embed.
 
 
 8. Click the {guilabel}`right arrow` button, or press {kbd}`Enter`.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/c2a67e0a-eb25-4535-90a4-bd4a0ce8dac1/ascreenshot.jpeg?tl_px=474,614&br_px=2194,1576&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,281)
-
+   ````{card}
+   ```{image} _static/add-a-video-block-06.jpeg
+   :alt: The right arrow button
+   :target: _static/add-a-video-block-06.jpeg
+   ```
+   +++
+   _The right arrow button_
+   ````
 
 9. The block shows the preview image of the video.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/9b4f7f32-bbf3-4001-b96b-0972ec3428e1/ascreenshot.jpeg?tl_px=0,105&br_px=1719,1066&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=146,277)
-
+   ````{card}
+   ```{image} _static/add-a-video-block-07.jpeg
+   :alt: The video preview image
+   :target: _static/add-a-video-block-07.jpeg
+   ```
+   +++
+   _The video preview image_
+   ````
 
 10. In the right column, you can see and change the video block's properties. 
 
     The "Video URL" field lets you view or change the URL of the embedded video.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/52f559cf-7aed-4e4a-b9af-6b1402135215/ascreenshot.jpeg?tl_px=1090,0&br_px=2810,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=677,154)
-
+   ````{card}
+   ```{image} _static/add-a-video-block-08.jpeg
+   :alt: The video web address
+   :target: _static/add-a-video-block-08.jpeg
+   ```
+   +++
+   _The video web address_
+   ````
 
 11. The "Preview Image URL" lets you set a preview image for the video block, if you don't want to use the one provided. 
 
     To change the preview image, click the {guilabel}`navigate` button to the right to navigate to or search for the preview image on the site.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/0d76ee5f-2d25-4ef2-ab5c-fc53b1cb4162/ascreenshot.jpeg?tl_px=1090,0&br_px=2810,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=677,241)
-
+   ````{card}
+   ```{image} _static/add-a-video-block-09.jpeg
+   :alt: The preview image web address
+   :target: _static/add-a-video-block-09.jpeg
+   ```
+   +++
+   _The preview image web address_
+   ````
 
 12. The {guilabel}`Alignment` buttons let you set how the video block should be placed, relative to other blocks on the page.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/4682167f-abe4-4c66-a940-55e795061ef1/ascreenshot.jpeg?tl_px=1090,77&br_px=2810,1038&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=902,277)
-
+   ````{card}
+   ```{image} _static/add-a-video-block-10.jpeg
+   :alt: The video block alignment controls
+   :target: _static/add-a-video-block-10.jpeg
+   ```
+   +++
+   _The video block alignment controls_
+   ````
 
 13. You can change the background color of the video block.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/4ac158f9-893b-452e-b9b0-4b625eb5ac6f/ascreenshot.jpeg?tl_px=1090,425&br_px=2810,1386&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=844,277)
-
+   ````{card}
+   ```{image} _static/add-a-video-block-11.jpeg
+   :alt: The background color choice
+   :target: _static/add-a-video-block-11.jpeg
+   ```
+   +++
+   _The background color choice_
+   ````
 
 14. Click the {guilabel}`Save` button.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/82a5d6ca-1101-4775-902c-9ffe4184828d/ascreenshot.jpeg?tl_px=0,0&br_px=1719,961&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=30,22)
-
+   ````{card}
+   ```{image} _static/add-a-video-block-12.jpeg
+   :alt: The Save button
+   :target: _static/add-a-video-block-12.jpeg
+   ```
+   +++
+   _The Save button_
+   ````
 
 15. To view the video, click the {guilabel}`play` button in the center of the video block.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/e354c1eb-ca52-4da7-a255-bc9987e8b10a/ascreenshot.jpeg?tl_px=612,411&br_px=2332,1372&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,277)
-
+   ````{card}
+   ```{image} _static/add-a-video-block-13.jpeg
+   :alt: The play button
+   :target: _static/add-a-video-block-13.jpeg
+   ```
+   +++
+   _The play button_
+   ````
 
 16. In the case of YouTube videos, this loads the YouTube player. To continue viewing the video, click the YouTube {guilabel}`play` button.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/9a095787-2578-4119-95ac-25960518a169/ascreenshot.jpeg?tl_px=612,409&br_px=2332,1370&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,277)
-
+   ````{card}
+   ```{image} _static/add-a-video-block-14.jpeg
+   :alt: The YouTube play button
+   :target: _static/add-a-video-block-14.jpeg
+   ```
+   +++
+   _The YouTube play button_
+   ````
 
 17. Video display controls are provided by the video host's player.
 
-    ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-11-23/e7654737-bcc5-4fd3-8885-55f37d55dfdb/ascreenshot.jpeg?tl_px=0,614&br_px=1719,1576&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=345,462)
+   ````{card}
+   ```{image} _static/add-a-video-block-15.jpeg
+   :alt: Video playback controls
+   :target: _static/add-a-video-block-15.jpeg
+   ```
+   +++
+   _Video playback controls_
+   ````