docs: make videos bigger (#4980)

This PR changes the `VideoContent` component to:
- remove the extra text; keeps only videos
- makes videos take up the full article width
- multiple videos stack vertically (this may or may not be the best way
to handle it, but we don't have any instances of using multiple videos
as of right now, so we shouldn't touch this until we do).

By chance, it also removes a lot of trailing whitespace in files. I
suggest checking out the diff with whitespace hidden.

Before (single video):

![image](https://github.com/Unleash/unleash/assets/17786332/e47e8827-93e9-4dbc-bdfb-cdb1665fae98)


Before (if there were multiple videos): 

![image](https://github.com/Unleash/unleash/assets/17786332/f41ab11f-649f-4369-96fe-70a5d66ced40)


After (single video):

![image](https://github.com/Unleash/unleash/assets/17786332/0df9d3fd-3935-4567-93d0-470682fe4bb3)


After (if there are multiple videos): 

![image](https://github.com/Unleash/unleash/assets/17786332/98b4a590-c03c-40a1-880f-93ad05090c5e)

website/docs/how-to/how-to-capture-impression-data.mdx

@@ -12,9 +12,7 @@ Unleash allows you to gather [**impression data**](../reference/impression-data.
 
 This guide will take you through everything you need to do in Unleash to facilitate such a workflow. It will show you how to send data to Posthog as an example sink, but the exact same principles will apply to any other service of the same kind.
 
-<VideoContent videoUrls={["https://www.youtube.com/embed/bxYdeMb9ffw"]}>
+<VideoContent videoUrls={["https://www.youtube.com/embed/bxYdeMb9ffw"]}/>
-This content in this guide is also available in video format.
-</VideoContent>
 
 ## Prerequisites
 

website/docs/how-to/how-to-create-and-assign-custom-project-roles.md

@@ -13,11 +13,7 @@ Custom project roles were introduced in **Unleash 4.6** and are only available i
 
 This guide takes you through [how to create](#creating-custom-project-roles "how to create custom project roles") and [assign](#assigning-custom-project-roles "how to assign custom project roles") [custom project roles](../reference/rbac.md#custom-project-roles). Custom project roles allow you to fine-tune access rights and permissions within your projects.
 
-<VideoContent videoUrls={["https://www.youtube.com/embed/2BlckVMHxgE" , "https://www.youtube.com/embed/IqaD8iGxkwk"]}>
+<VideoContent videoUrls={["https://www.youtube.com/embed/2BlckVMHxgE" , "https://www.youtube.com/embed/IqaD8iGxkwk"]}/>
-
-The guides on this page are also available in video format! Does a minute or two of watching someone walk through the steps sound better to you than following steps with static screenshots? If so, check out these video walkthroughs instead 🍿
-
-</VideoContent>
 
 ## Creating custom project roles
 

website/docs/reference/change-requests.md

@@ -12,11 +12,7 @@ The change requests for segments was introduced in **Unleash 5.4.0**.
 :::
 
 
-<VideoContent videoUrls={["https://www.youtube.com/embed/ENUqFVcdr-w"]} title="Change requests in 5 minutes">
+<VideoContent videoUrls={["https://www.youtube.com/embed/ENUqFVcdr-w"]}/>
-
-This article contains all the details about how change requests work in Unleash; but if you're only looking for a brief explanation and a demo, how about this 5 minute explainer video? 🍿
-
-</VideoContent>
 
 
 Feature flagging is a powerful tool, and because it's so powerful, you sometimes need to practice caution. The ability to have complete control over your production environment comes at the cost of the potential to make mistakes in production. Change requests were introduced in version 4.19.0 to alleviate this fear. Change requests allow you to group changes together and apply them to production at the same time, instead of applying changes directly to production. This allows you to make multiple changes to feature toggles and their configuration and status (on/off) all at once, reducing the risk of errors in production.

website/docs/reference/sdks/index.md

@@ -11,11 +11,7 @@ Unleash provides official client SDKs for a number of programming language. Addi
 ## Official SDKs
 
 
-<VideoContent videoUrls={["https://www.youtube.com/embed/mCXSAWzdn3I"]}>
+<VideoContent videoUrls={["https://www.youtube.com/embed/mCXSAWzdn3I"]}/>
-
-In addition to the written reference below, the following video walks through the various client and server-side SDK offerings, how they are used as well as their differences.
-
-</VideoContent>
 
 ### Server-side SDKs:
 

website/docs/reference/segments.mdx

@@ -11,11 +11,7 @@ was made available for Open Source from Unleash v5.5.
 
 :::
 
-<VideoContent videoUrls={["https://www.youtube.com/embed/LWMCCFcRic0"]}>
+<VideoContent videoUrls={["https://www.youtube.com/embed/LWMCCFcRic0"]}/>
-
-Want a quick overview of what segments are and what they're used for? Well, then you're in luck: we've got this short segment explainer video to help you out 📽️
-
-</VideoContent>
 
 A **segment** is a reusable collection of [strategy constraints](../reference/strategy-constraints.md). Like with strategy constraints, you apply segments to [feature toggle activation strategies](../reference/activation-strategies.md).
 

website/docs/reference/strategy-variants.md

@@ -10,11 +10,7 @@ import VideoContent from '@site/src/components/VideoContent.jsx'
 :::
 
 
-<VideoContent videoUrls={["https://www.youtube.com/embed/M0oyGHtva0o"]}>
+<VideoContent videoUrls={["https://www.youtube.com/embed/M0oyGHtva0o"]}/>
-
-In addition to the written reference below, the following video provides for details on Strategy Variants, including setup, migration tips and use cases. 🍿  
-
-</VideoContent>
 
 Gradual rollout strategies in Unleash can have _strategy variants_. _Strategy variants_ allow each matching activation strategy to return not just simple enabled/disabled status, but
 also attach any custom data or even multiple data items.

website/docs/topics/proxy-hosting.mdx

@@ -13,11 +13,7 @@ Whether you're hosting Unleash yourself or have a managed solution will be a key
 Edge is the next-gen replacement of the Unleash proxy and is recommended to be used over the proxy in most cases, with the exception of the scenario where custom strategies are being used as Edge does not support these.
 :::
 
-<VideoContent videoUrls={["https://www.youtube.com/embed/6uIdF-yByWs"]}>
+<VideoContent videoUrls={["https://www.youtube.com/embed/6uIdF-yByWs"]}/>
-
-In addition to the written reference below, the following video provides for details on the Edge architecture, setup and demo 🍿
-
-</VideoContent>
 
 ## Unleash-hosted Frontend API vs self-hosted Edge/Proxy {#unleash-hosted-or-self-hosted}
 

website/src/components/VideoContent.jsx

@@ -1,50 +1,27 @@
 import React from 'react';
 import Admonition from '@theme/Admonition';
 
-const icons = {
+const Component = ({ videoUrls }) => {
-    tip: (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="12"
-            height="16"
-            viewBox="0 0 12 16"
-            ariaHidden="true"
-        >
-            <path
-                fillRule="evenodd"
-                d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
-            />
-        </svg>
-    ),
-};
-
-const Component = ({ title = 'video content', videoUrls, children }) => {
     return (
-        <article className="unleash-video-container">
+        <article className='unleash-video-container'>
-            <Admonition icon={icons.tip} title={title} type="note">
-                {children}
-            </Admonition>
-
-            <div className="videos">
             {videoUrls ? (
                 videoUrls.map((url) => (
                     <iframe
                         key={url}
-                            width="100%"
+                        width='100%'
-                            height="auto"
+                        height='auto'
                         src={url}
-                            title="YouTube video player"
+                        title='YouTube video player'
-                            frameBorder="0"
+                        frameBorder='0'
                         allowFullScreen
                     ></iframe>
                 ))
             ) : (
-                    <Admonition type="danger">
+                <Admonition type='danger'>
-                        You need to provide YouTube video URLs for this
+                    You need to provide YouTube video URLs for this component to
-                        component to work properly.
+                    work properly.
                 </Admonition>
             )}
-            </div>
         </article>
     );
 };

website/src/css/custom.css

@@ -160,42 +160,16 @@ html[data-theme='dark'] .header-github-link:before {
 /* Video content container */
 
 .unleash-video-container {
-    display: grid;
+    display: flex;
-    --gap: 0.5em;
+    flex-flow: column;
-    --border-radius: var(--ifm-alert-border-radius);
     gap: var(--gap);
-    margin-bottom: 1em;
+    margin-bottom: 1rem;
-}
-
-.unleash-video-container > .videos {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: var(--gap);
-}
-
-.unleash-video-container > .admonition {
-    box-shadow: none;
-    background-color: var(--unleash-color-admonition-background);
-    color: var(--unleash-color-admonition-text);
-    border-color: var(--unleash-color-admonition-border);
-    margin: 0;
 }
 
 .unleash-video-container iframe {
     aspect-ratio: 16/9;
 }
 
-@media screen and (min-width: 450px) {
-    .unleash-video-container {
-        grid-template-columns: 1fr min(250px, 25%);
-    }
-    .unleash-video-container > .videos {
-        display: flex;
-        flex-direction: column;
-        gap: var(--gap);
-    }
-}
-
 /* end video content container */
 
 /* docusaurus-plugin-openapi-docs styling