docs: Add videos and tune aspect ratio

igorlukanin · igorlukanin · commit 9956ad71758e · 2025-02-13T19:11:38.000+01:00
diff --git a/docs/components/mdx/YouTubeVideo/YouTubeVideo.tsx b/docs/components/mdx/YouTubeVideo/YouTubeVideo.tsx
@@ -6,13 +6,22 @@ const cn = classnames.bind(styles);
 
 export type YouTubeVideoProps = {
   url: string;
+  aspectRatio?: number;
 };
 
-export const YouTubeVideo = ({ url }: YouTubeVideoProps) => {
+function formatAspectRatioAsPercentage(aspectRatio: number) {
+  return `${((1 / aspectRatio) * 100).toFixed(2)}%`;
+}
+
+export const YouTubeVideo = ({ url, aspectRatio = 16/9 }: YouTubeVideoProps) => {
   return (
     <div
       className={cn('YoutubeVideo__Wrapper')}
-      style={{ position: 'relative', paddingBottom: '56.25%', height: 0 }}
+      style={{
+        position: 'relative',
+        paddingBottom: formatAspectRatioAsPercentage(aspectRatio),
+        height: 0
+      }}
     >
       <iframe
         src={url}
diff --git a/docs/pages/guides/recipes/auth/sql-api-ldap.mdx b/docs/pages/guides/recipes/auth/sql-api-ldap.mdx
@@ -5,7 +5,10 @@ API](/product/apis-integrations/sql-api) with a LDAP catalog. You can use
 this approach to enable single sign-on (SSO) experience in BI tools
 connecting to Cube for your end users.
 
-<YouTubeVideo url="https://www.youtube.com/embed/vGF7n4WWriA?si=RIk7G3a4lO2DnNJj"/>
+<YouTubeVideo
+  url="https://www.youtube.com/embed/vGF7n4WWriA"
+  aspectRatio={4/2.25}
+/>
 
 ## Use case
 
diff --git a/docs/pages/product/apis-integrations/google-sheets.mdx b/docs/pages/product/apis-integrations/google-sheets.mdx
@@ -15,7 +15,10 @@ add-on, you will be able to [create reports via pivot
 table](#create-reports-via-pivot-table) and work with [saved
 reports](#work-with-saved-reports).
 
-<YouTubeVideo url="https://www.youtube.com/embed/qPp9hroqd4g"/>
+<YouTubeVideo
+  url="https://www.youtube.com/embed/qPp9hroqd4g"
+  aspectRatio={4/2.56}
+/>
 
 ## Installation
 
diff --git a/docs/pages/product/auth/data-access-policies.mdx b/docs/pages/product/auth/data-access-policies.mdx
@@ -5,6 +5,11 @@ and [row-level](#row-level-access) security for different [data access roles](#d
 You can define access control rules in data model files, allowing for an organized
 and maintainable approach to security.
 
+<YouTubeVideo
+  url="https://www.youtube.com/embed/yJfnYB27wSQ"
+  aspectRatio={4/3}
+/>
+
 ## Data access roles
 
 Each request to Cube includes a [security context][ref-sec-ctx], which can contain
diff --git a/docs/pages/product/configuration/data-sources/ksqldb.mdx b/docs/pages/product/configuration/data-sources/ksqldb.mdx
@@ -18,7 +18,10 @@ ksqlDB support is available in Cube Cloud on the
 
 See how you can use ksqlDB and Cube Cloud to power real-time analytics in Power BI:
 
-<YouTubeVideo url="https://www.youtube.com/embed/RD_HZ7xE8G0" />
+<YouTubeVideo
+  url="https://www.youtube.com/embed/RD_HZ7xE8G0"
+  aspectRatio={4/3.55}
+/>
 
 ## Prerequisites
 
diff --git a/docs/pages/product/configuration/visualization-tools/google-sheets.mdx b/docs/pages/product/configuration/visualization-tools/google-sheets.mdx
@@ -3,7 +3,10 @@
 [Google Sheets][link-google-sheets] is an online, collaborative spreadsheets
 application.
 
-<YouTubeVideo url="https://www.youtube.com/embed/qPp9hroqd4g"/>
+<YouTubeVideo
+  url="https://www.youtube.com/embed/qPp9hroqd4g"
+  aspectRatio={4/2.56}
+/>
 
 ## Connect from Cube Cloud
 
diff --git a/docs/pages/product/configuration/visualization-tools/powerbi.mdx b/docs/pages/product/configuration/visualization-tools/powerbi.mdx
@@ -11,7 +11,10 @@ is an interactive data visualization software product developed by Microsoft.
 See how you can use [ksqlDB][ref-ksqldb] and Cube Cloud to power real-time
 analytics in Power BI:
 
-<YouTubeVideo url="https://www.youtube.com/embed/RD_HZ7xE8G0" />
+<YouTubeVideo
+  url="https://www.youtube.com/embed/RD_HZ7xE8G0"
+  aspectRatio={4/3.55}
+/>
 
 ## Connect from Cube Cloud
 
diff --git a/docs/pages/product/deployment/cloud/deployments.mdx b/docs/pages/product/deployment/cloud/deployments.mdx
@@ -50,7 +50,10 @@ and programmatic [configuration options][ref-config-options].
 
 Watch the following video to for a step-by-step walkthrough:
 
-<YouTubeVideo url="https://www.youtube.com/embed/XeaZPUQRC8M" />
+<YouTubeVideo
+  url="https://www.youtube.com/embed/XeaZPUQRC8M"
+  aspectRatio={4/2.78}
+/>
 
 Exploring the demo deployment is a great way to understand how Cube works.
 Use the [data model editor][ref-data-model] to review the data model and
diff --git a/docs/pages/product/workspace/audit-log.mdx b/docs/pages/product/workspace/audit-log.mdx
@@ -15,7 +15,10 @@ You can also choose an [Audit Log tier](/product/deployment/cloud/pricing#audit-
 Read below about [collected events](#event-types). Also, see how you can [enable](#configuration)
 Audit Log, [view events](#viewing-events), and [download](#downloading-events) them.
 
-<YouTubeVideo url="https://www.youtube.com/embed/W7hQzLS3wPc" />
+<YouTubeVideo
+  url="https://www.youtube.com/embed/W7hQzLS3wPc"
+  aspectRatio={4/2.64}
+/>
 
 ## Configuration
 
diff --git a/docs/pages/product/workspace/integrations.mdx b/docs/pages/product/workspace/integrations.mdx
@@ -12,7 +12,10 @@ The Integrations page is available in Cube Cloud on
 
 </SuccessBox>
 
-<YouTubeVideo url="https://www.youtube.com/embed/-N5dDeGqv8M" />
+<YouTubeVideo
+  url="https://www.youtube.com/embed/-N5dDeGqv8M"
+  aspectRatio={4/2.83}
+/>
 
 You can [manage integrations](#manage-integrations), connect a [specific
 tool](#connect-specific-tools), or [view API credentials](#view-api-credentials).
diff --git a/docs/pages/product/workspace/monitoring.mdx b/docs/pages/product/workspace/monitoring.mdx
@@ -32,7 +32,10 @@ destinations][vector-docs-sinks], also known as _sinks_.
 
 <Diagram src="https://ucarecdn.com/17dbc263-2be4-4b7d-9f34-270cd66e878b/" />
 
-<YouTubeVideo url="https://www.youtube.com/embed/iPD0axEYU6k" />
+<YouTubeVideo
+  url="https://www.youtube.com/embed/iPD0axEYU6k"
+  aspectRatio={4/2.87}
+/>
 
 ## Guides
 
diff --git a/docs/pages/product/workspace/playground.mdx b/docs/pages/product/workspace/playground.mdx
@@ -31,6 +31,11 @@ for them, [compose](#composing-queries) a query from scratch or [paste](#pasting
 an exsiting query, view [results](#viewing-results), check a [generated
 query](#viewing-a-generated-query), or copy equivalent [queries for data APIs](#copying-api-queries).
 
+<YouTubeVideo
+  url="https://www.youtube.com/embed/4epojUSQvOU"
+  aspectRatio={4/3}
+/>
+
 ## Viewing the data model
 
 You can see a list of all cubes or views in the sidebar on the left. Choose either
diff --git a/docs/pages/product/workspace/vizard.mdx b/docs/pages/product/workspace/vizard.mdx
@@ -14,7 +14,10 @@ Chart Prototyping is part of [Playground][ref-playground].
 To access Chart Prototyping from Playground, compose and run a query, expand
 the <Btn>Chart</Btn> pane, and click <Btn>Code</Btn> on the right:
 
-<YouTubeVideo url="https://www.youtube.com/embed/OFiJ8AVNHQw" />
+<YouTubeVideo
+  url="https://www.youtube.com/embed/OFiJ8AVNHQw"
+  aspectRatio={4/3.07}
+/>
 
 ## Preview the chart
 
diff --git a/docs/pages/reference/data-model/hierarchies.mdx b/docs/pages/reference/data-model/hierarchies.mdx
@@ -14,6 +14,11 @@ You can also preview hierarchies in [Playground][ref-playground].
 
 Any hierarchy should have the following parameters: [`name`](#name) and [`levels`](#levels).
 
+<YouTubeVideo
+  url="https://www.youtube.com/embed/Y5E6DmH_Hz4"
+  aspectRatio={4/3}
+/>
+
 ## Parameters
 
 ### `name`
