docs/video embed, academy video embed fixes (#5005)

PR contains the following:

1) New video embeds for the following docs:

- website/docs/reference/deploy/environment-import-export.mdx
- website/docs/reference/playground.mdx
- website/docs/reference/strategy-constraints.md
- website/docs/topics/a-b-testing.md

2) Improvements to the Academy course playlist embedding for the three
Academy courses. Tested the standard method of embedding video, and it
seems this works well for playlists too.
Switching to the native Docusaurus embed solves the issue with dynamic
resizing. Rather than a static embed size the video will now scale to
the browser window size.

website/docs/reference/deploy/environment-import-export.mdx

@@ -1,6 +1,7 @@
 ---
 title: Environment Import & Export
 ---
+import VideoContent from '@site/src/components/VideoContent.jsx'
 
 :::info Availability
 
@@ -8,6 +9,9 @@ The environment import and export first appeared in Unleash 4.22.0.
 
 :::
 
+  
+<VideoContent videoUrls={["https://www.youtube.com/embed/Bs73l2fZxJ4"]}/>
+  
 Environment export and import lets you copy feature configurations from one environment to another and even copy features from one Unleash instance to another.
 
 When exporting, you select a set of features and **one** environment to export the configuration from. The environment must be the same for all features.

website/docs/reference/playground.mdx

@@ -2,6 +2,7 @@
 title: The Playground
 ---
 import Figure from '@site/src/components/Figure/Figure.tsx'
+import VideoContent from '@site/src/components/VideoContent.jsx'
 
 :::info Availability
 
@@ -9,6 +10,9 @@ The Unleash playground is available in all Unleash versions from Unleash 4.14 on
 
 :::
 
+
+<VideoContent videoUrls={["https://www.youtube.com/embed/-HP6axX5jUo"]}/>
+
 ![The Unleash Playground form and an indication of where in the nav menu it is located.](/img/playground-form.png)
 
 The unleash playground is a part of the Unleash Admin UI and an accompanying API. The playground lets you see which of your instance's feature toggles would be enabled for a given Unleash context. It has multiple uses, such as:

website/docs/reference/strategy-constraints.md

@@ -1,6 +1,7 @@
 ---
 title: Strategy Constraints
 ---
+import VideoContent from '@site/src/components/VideoContent.jsx'
 
 :::info Availability
 
@@ -30,6 +31,9 @@ You can constrain both on [standard context fields](../reference/unleash-context
 
 This page explains what strategy constraints are in Unleash and how they work. If you want to know *how you add* strategy constraints to an activation strategy, see [the corresponding how-to guide](../how-to/how-to-add-strategy-constraints.md "how to add strategy constraints").
 
+<VideoContent videoUrls={["https://www.youtube.com/embed/kqtqMFhLRBE"]}/>
+
+
 ## Constraining on custom context fields
 
 :::info Making custom context fields available

website/docs/topics/a-b-testing.md

@@ -1,6 +1,7 @@
 ---
 title: A/B and multivariate testing
 ---
+import VideoContent from '@site/src/components/VideoContent.jsx'
 
 A/B testing is a type of randomized controlled experiment, where you test two different versions of a feature to see which version performs better. If you have more than two versions, it's known as _multivariate testing_. Coupled with analytics, A/B and multivariate testing enables you to better understand your users and how you can serve them better.
 
@@ -8,6 +9,9 @@ To facilitate A/B testing and experimentation, Unleash has a built-in 'experimen
 
 In the rest of this document, _A/B testing_ will refer to both strict A/B testing and multivariate testing unless otherwise specified.
 
+<VideoContent videoUrls={["https://www.youtube.com/embed/bxYdeMb9ffw?si=XSnKk74HbZg3puXO"]}/>
+
+
 ## What is A/B testing
 
 [According to Wikipedia](https://en.wikipedia.org/wiki/A/B_testing), A/B testing is a user experience research methodology. They're useful for understanding user engagement and satisfaction.

website/docs/tutorials/academy-advanced-for-devs.md

@@ -2,6 +2,8 @@
 id: academy-advanced-for-devs
 title: Advanced for Developers
 ---
+import VideoContent from '@site/src/components/VideoContent.jsx'
+
 :::info
 **This Unleash Academy course is for all developer roles working with Unleash, after Foundational content has been reviewed.**
 :::
@@ -23,9 +25,9 @@ You’ll master advanced use cases and implement best practices - this course wi
   
 ## Course Detail
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?si=ry507OKlfb1liKFD&amp;list=PLcVJ5JY19ncXmAbFqfamyAV698WINtQaJ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen playsinline></iframe>
-
-
+<VideoContent videoUrls={["https://www.youtube.com/embed/videoseries?si=ry507OKlfb1liKFD&amp;list=PLcVJ5JY19ncXmAbFqfamyAV698WINtQaJ"]}/>
+  
+  
 :::info Embedded Player
 The full course is shown above.  
 Click the icon in the top right corner of the embedded player to view your progress as you work through the videos.  

website/docs/tutorials/academy-foundational.md

@@ -2,6 +2,8 @@
 id: academy-foundational
 title: Foundational
 ---
+import VideoContent from '@site/src/components/VideoContent.jsx'
+
 :::info
 **This Unleash Academy course is for all roles working with Unleash - Developers, Product owners, Leaders.**
 :::
@@ -42,9 +44,7 @@ An understanding of Unleash anatomy and architecture and how the different syste
   
 ## Course Detail
   
-
-<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?si=YyLiIYQck7fsG5HK&amp;list=PLcVJ5JY19ncU_6cq2QaCuXDBbbitiJEn4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen playsinline></iframe>
-  
+<VideoContent videoUrls={["https://www.youtube.com/embed/videoseries?si=YyLiIYQck7fsG5HK&amp;list=PLcVJ5JY19ncU_6cq2QaCuXDBbbitiJEn4"]}/>
   
 
 :::info Embedded Player

website/docs/tutorials/academy-managing-unleash-for-devops.md

@@ -2,6 +2,8 @@
 id: academy-managing-unleash-for-devops
 title: Managing Unleash for DevOps/Admins
 ---
+import VideoContent from '@site/src/components/VideoContent.jsx'
+
 :::info
 **This Unleash Academy course is for all DevOps and Admin roles working with Unleash, after Foundational content has been reviewed.**
 :::
@@ -23,9 +25,9 @@ Understand how to deploy Unleash in a secure and performant manner through Edge,
 
 ## Course Detail
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?si=m0PkzvBqtGphGblK&amp;list=PLcVJ5JY19ncVxAesGfmcs8vshai0mSdAS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen playsinline></iframe>
-
+<VideoContent videoUrls={["https://www.youtube.com/embed/videoseries?si=m0PkzvBqtGphGblK&amp;list=PLcVJ5JY19ncVxAesGfmcs8vshai0mSdAS"]}/>
 
+  
 :::info Embedded Player
 The full course is shown above.  
 Click the icon in the top right corner of the embedded player to view your progress as you work through the videos.