From 8921c71603b91151518eada69dfafc31dadd2d35 Mon Sep 17 00:00:00 2001
From: Jeff Chew <jeff.chew@gmail.com>
Date: Wed, 14 Aug 2024 09:22:30 -0400
Subject: [PATCH 1/3] feat(kaltura): adding kaltura video player to gatsby

---
 gatsby-ssr.js                               |  4 ++
 src/components/KalturaVideo/KalturaVideo.js | 45 +++++++++++++++++++++
 src/components/KalturaVideo/index.js        |  3 ++
 src/pages/guidelines/2x-grid/overview.mdx   | 26 ++++++------
 4 files changed, 66 insertions(+), 12 deletions(-)
 create mode 100644 src/components/KalturaVideo/KalturaVideo.js
 create mode 100644 src/components/KalturaVideo/index.js

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 823b04a5785..b55fe6a2950 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -52,6 +52,10 @@ export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
       key="fathom"
       defer
     />,
+    <script
+      key="video-player"
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/video-player.min.js" />,
   ]);
 
   setPostBodyComponents([
diff --git a/src/components/KalturaVideo/KalturaVideo.js b/src/components/KalturaVideo/KalturaVideo.js
new file mode 100644
index 00000000000..7793ca3cebb
--- /dev/null
+++ b/src/components/KalturaVideo/KalturaVideo.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+/**
+ * KalturaVideo component: A video player container for Kaltura videos.
+ *
+ * @param {object} videoProps - KalturaVideo component props
+ * @param {string} videoProps.videoid - The ID of the Kaltura video to be played.
+ * @param {boolean} videoProps.hideCaption - Determines if caption should be hidden.
+ * @returns {JSX.Element} JSX element containing the video player container.
+ */
+const KalturaVideo = ({ videoid, hideCaption = false }) => {
+    let videoProps = {
+        'video-id': videoid,
+    }
+
+    if (hideCaption) {
+        videoProps['hide-caption'] = true;
+    }
+
+    return (
+        <div>
+            <dds-video-player-container {...videoProps}></dds-video-player-container>
+        </div>
+    );
+};
+
+/**
+ * @typedef {object} KalturaVideoProps
+ *
+ * @property {string} videoid - The ID of the Kaltura video to be played.
+ */
+KalturaVideo.propTypes = {
+    hideCaption: PropTypes.bool,
+    videoid: PropTypes.string.isRequired,
+};
+
+/**
+ * @type {{hideCaption: boolean}}
+ */
+KalturaVideo.defaultProps = {
+    hideCaption: false,
+}
+
+export default KalturaVideo;
diff --git a/src/components/KalturaVideo/index.js b/src/components/KalturaVideo/index.js
new file mode 100644
index 00000000000..2e0c6962167
--- /dev/null
+++ b/src/components/KalturaVideo/index.js
@@ -0,0 +1,3 @@
+import KalturaVideo from './KalturaVideo';
+
+export default KalturaVideo;
diff --git a/src/pages/guidelines/2x-grid/overview.mdx b/src/pages/guidelines/2x-grid/overview.mdx
index 8766fb17c69..c9585f50356 100644
--- a/src/pages/guidelines/2x-grid/overview.mdx
+++ b/src/pages/guidelines/2x-grid/overview.mdx
@@ -6,6 +6,8 @@ description:
 tabs: ['Overview', 'Implementation']
 ---
 
+import KalturaVideo from 'components/KalturaVideo';
+
 <PageDescription>
 
 It’s fundamental to everything we design. The 2x Grid is the geometric
@@ -25,7 +27,7 @@ creative decision-making.
 
 </AnchorLinks>
 
-<Video title="2x Grid Overview" vimeoId="281513522" />
+<KalturaVideo videoid="1_35lz8xds"></KalturaVideo>
 
 ## Resources
 
@@ -79,7 +81,7 @@ Margin and padding are always applied in fixed mini unit multiples. Boxes are
 sized by applying a sizing scale based on either fixed mini units or fluid
 column widths, along with a core set of aspect ratios.
 
-<Video title="Mini unit" vimeoId="292608020" />
+<KalturaVideo videoid="1_o9azejx0"></KalturaVideo>
 
 ## 2x Grid fundamentals
 
@@ -194,7 +196,7 @@ for more information.
 
 For best results, test designs and code at each of these standard breakpoints.
 
-<Video title="Breakpoints" vimeoId="292015984" />
+<KalturaVideo videoid="1_6lu45vhf"></KalturaVideo>
 
 ## Grid behaviors
 
@@ -229,7 +231,7 @@ ratios. Margin and padding are fixed multiples of mini units. In between
 breakpoints, actual column width is a percentage of the grid area, not a mini
 unit multiple. Content scales fluidly.
 
-<Video title="Fluid grid" vimeoId="292024522" />
+<KalturaVideo videoid="1_sy3d48pv"></KalturaVideo>
 
 ### Fixed boxes
 
@@ -237,7 +239,7 @@ A grid can be formed with fixed boxes by arranging tiles in an inline block,
 icons in toolbars, etc. Column count grows with browser width. Tiles wrap to the
 next line, or are sometimes truncated with an overflow scroll.
 
-<Video title="Fixed boxes" vimeoId="292024183" />
+<KalturaVideo videoid="1_tzcg1t0h"></KalturaVideo>
 
 First choose a base size from the [sizing scale](#sizing-scale), then build up
 each box in multiples of the base size, following recommended
@@ -255,7 +257,7 @@ Use the [sizing scale](#sizing-scale) to size a fixed dimension. Use
 column-width multiples to size a grid-fluid dimension. Aspect ratios do not
 apply.
 
-<Video title="Hybrid boxes" vimeoId="292025098" />
+<KalturaVideo videoid="1_c8za6jzw"></KalturaVideo>
 
 Here are some common UI behaviors:
 
@@ -321,7 +323,7 @@ The collapsed Flexible Panel expands when the user hovers over any portion of
 it. When flexible panels expand, they either condense both the content and the
 grid or they push content beyond the edge of the browser.
 
-<Video title="Flexible panels" vimeoId="292975726" />
+<KalturaVideo videoid="1_uto06vm9"></KalturaVideo>
 
 <br />
 <br />
@@ -331,7 +333,7 @@ grid or they push content beyond the edge of the browser.
 Fixed panels maintain a static width, cannot be collapsed, and also exist
 outside of the responsive grid.
 
-<Video title="Fixed panels" vimeoId="292988292" />
+<KalturaVideo videoid="1_zcv32omy"></KalturaVideo>
 
 <br />
 <br />
@@ -342,7 +344,7 @@ This panel style floats above the primary content area and does not affect the
 responsive grid. Floating panels conceal any UI elements below them and must be
 dismissible by the user. Inline menus, dropdowns and tooltips also float.
 
-<Video title="Floating panels" vimeoId="292977039" />
+<KalturaVideo videoid="1_wjyfir70"></KalturaVideo>
 
 ## Sizing scale
 
@@ -397,7 +399,7 @@ etc. Check out the [breakpoints table](#breakpoints) for pixel sizings.
 After determining your base size, multiply it as needed for each use. For box
 sizing, apply an [aspect ratio](#aspect-ratio) too.
 
-<Video title="Scaling multiple" vimeoId="292026497" />
+<KalturaVideo videoid="1_1xyynstm"></KalturaVideo>
 
 ### Aspect ratio
 
@@ -425,7 +427,7 @@ it by 4 in width and 2 in height, for a fixed box size of 320 by 160.
 Use the fixed sizing scale to set vertical spacing between sections, by adding
 it to the top or bottom margin of a box:
 
-<Video title="Vertical rhythm" vimeoId="292028388" />
+<KalturaVideo videoid="1_kmt1akr3"></KalturaVideo>
 
 <DoDontRow>
   <DoDont
@@ -451,4 +453,4 @@ When multiple components adhere to the same scale, grid relationships naturally
 emerge. For example, vertically aligning form fields such as checkboxes and
 radio buttons produces a grid effect when interior spacing is consistent.
 
-<Video title="Components" vimeoId="292028752" />
+<KalturaVideo videoid="1_anzhsyee"></KalturaVideo>

From 0f1cd6c829dd1559e94f01a8bca3ebaf13aa19c2 Mon Sep 17 00:00:00 2001
From: Jeff Chew <jeff.chew@gmail.com>
Date: Thu, 15 Aug 2024 16:24:11 -0400
Subject: [PATCH 2/3] feat(kaltura): adding kaltura video player to gatsby

---
 src/pages/designing/tutorials.mdx             |  3 +-
 .../guidelines/2x-grid/implementation.mdx     |  4 ++-
 src/pages/guidelines/color/overview.mdx       |  3 +-
 src/pages/guidelines/motion/choreography.mdx  | 32 ++++++++++---------
 src/pages/guidelines/motion/overview.mdx      | 27 ++++++++--------
 5 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/pages/designing/tutorials.mdx b/src/pages/designing/tutorials.mdx
index d1f512e0693..4826b139b0e 100644
--- a/src/pages/designing/tutorials.mdx
+++ b/src/pages/designing/tutorials.mdx
@@ -7,6 +7,7 @@ description:
 
 import { Button } from 'carbon-components-react';
 import { ArrowRight16 } from '@carbon/icons-react';
+import KalturaVideo from 'components/KalturaVideo';
 
 <PageDescription>
 
@@ -29,7 +30,7 @@ Learn about Carbon and its history. This video covers how the IBM Design
 Language is applied to Carbon, how Carbon interacts with domain level guidance,
 and what it means to be an open source design system.
 
-<Video title="Introduction to Carbon" vimeoId="457802924" />
+<KalturaVideo videoid="1_68e5qyal"></KalturaVideo>
 
 For further learning, check out
 [All about Carbon](/all-about-carbon/what-is-carbon),
diff --git a/src/pages/guidelines/2x-grid/implementation.mdx b/src/pages/guidelines/2x-grid/implementation.mdx
index 8926259c969..be36e46f0f8 100644
--- a/src/pages/guidelines/2x-grid/implementation.mdx
+++ b/src/pages/guidelines/2x-grid/implementation.mdx
@@ -6,6 +6,8 @@ description:
 tabs: ['Overview', 'Implementation']
 ---
 
+import KalturaVideo from 'components/KalturaVideo';
+
 <PageDescription>
 
 The IBM 2x Grid system is a fully responsive, robust, 16 column layout system
@@ -946,7 +948,7 @@ flexible panel expands when the user hovers over any portion of it. When
 flexible panels expand, they either condense both the content and the grid or
 they push content beyond the edge of the browser.
 
-<Video title="Usage" vimeoId="363369752" />
+<KalturaVideo videoid="1_uto06vm9"></KalturaVideo>
 
 ## Alignments
 
diff --git a/src/pages/guidelines/color/overview.mdx b/src/pages/guidelines/color/overview.mdx
index 6c9d7e7bacd..ff95d75b7ff 100755
--- a/src/pages/guidelines/color/overview.mdx
+++ b/src/pages/guidelines/color/overview.mdx
@@ -8,6 +8,7 @@ tabs: ['Overview', 'Usage', 'Code']
 
 import ColorBlock from 'components/ColorBlock';
 import ColorGrid from 'components/ColorGrid';
+import KalturaVideo from 'components/KalturaVideo';
 
 <PageDescription>
 
@@ -28,7 +29,7 @@ harmony through our User Interface design.
 
 </AnchorLinks>
 
-<Video title="Color Overview" vimeoId="281513790" />
+<KalturaVideo videoid="1_hmwoybv8"></KalturaVideo>
 
 <br />
 
diff --git a/src/pages/guidelines/motion/choreography.mdx b/src/pages/guidelines/motion/choreography.mdx
index 7e779738f79..76038b705ce 100644
--- a/src/pages/guidelines/motion/choreography.mdx
+++ b/src/pages/guidelines/motion/choreography.mdx
@@ -7,6 +7,8 @@ description:
 tabs: ['Overview', 'Choreography', 'Code']
 ---
 
+import KalturaVideo from 'components/KalturaVideo';
+
 <AnchorLinks>
 
 <AnchorLink>Paths</AnchorLink>
@@ -22,7 +24,7 @@ which never run diagonally.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} caption="When expanding or moving elements across the screen, stagger the timing of horizontal and vertical animations to create a path with a rounded corner.">
 
-<Video title="Paths staggering horizontally" vimeoId="310582887" />
+<KalturaVideo videoid="1_jgoaaek6" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -32,7 +34,7 @@ which never run diagonally.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} type="dont" caption="Not staggering horizontal and vertical animations create a straight diagonal path. It breaks the grid and is harsh to the eye.">
 
-<Video title="Paths not staggering horizontally" vimeoId="310582699" />
+<KalturaVideo videoid="1_jg4f1aic" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -42,12 +44,12 @@ which never run diagonally.
 <DoDontRow>
 <DoDont aspectRatio="1:1" caption="When removing an item from the grid, thumbnails on the edge existing and re-entering container create a smooth transition.">
 
-<Video title="Thumbnails with smooth transition" vimeoId="310582738" />
+<KalturaVideo videoid="1_mn5rj9pw" hideCaption></KalturaVideo>
 
 </DoDont>
 <DoDont type="dont"  aspectRatio="1:1" caption="Thumbnails moving on diagonal paths feels sporadic and harsh.">
 
-<Video title="Thumbnails with sporadic transition" vimeoId="310582775" />
+<KalturaVideo videoid="1_u4ryjvr2" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -55,12 +57,12 @@ which never run diagonally.
 <DoDontRow>
 <DoDont aspectRatio="1:1"  caption="When sorting or shuffling items on the grid, always using rounded corner paths to visually organize the movements.">
 
-<Video title="organized sort and shuffle" vimeoId="310582816" />
+<KalturaVideo videoid="1_3en5b830" hideCaption></KalturaVideo>
 
 </DoDont>
 <DoDont type="dont" aspectRatio="1:1" caption="Criss cross sorting appears disorganized. Avoid this motion path.">
 
-<Video title="disorganized criss crossing" vimeoId="310582851" />
+<KalturaVideo videoid="1_9obbx20i" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -88,7 +90,7 @@ to their difference in size.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} caption="Comparing data table expansion and dropdown">
 
-<Video title="Semantic consistency" vimeoId="310581970" />
+<KalturaVideo videoid="1_sagqi4ai" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -102,7 +104,7 @@ to clarify their respective spatial locations.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} caption="When the new content panel is on a higher layer, motion is “sliding”, moving content within with the panel.  Also always dim the content below when new layer is introduced above.">
 
-<Video title="Spatial consistency" vimeoId="310581999" />
+<KalturaVideo videoid="1_y12c3w2u" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -110,7 +112,7 @@ to clarify their respective spatial locations.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} caption="When the new content panel is on the same layer, motion is “pushing”, revealing content within with a mask.">
 
-<Video title="new content panel" vimeoId="310582064" />
+<KalturaVideo videoid="1_3neh7v17" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -125,12 +127,12 @@ motion signals cancellation.
 <DoDontRow>
 <DoDont aspectRatio="1:1" caption="Use motion to reinforce meaning. Affirmative action here triggers a different exit motion for the modal than negation.">
 
-<Video title="Intentional inconsistency" vimeoId="310582134" />
+<KalturaVideo videoid="1_nezauvly" hideCaption></KalturaVideo>
 
 </DoDont>
 <DoDont type="dont" aspectRatio="1:1">
 
-<Video title="incorrect intentional inconsistency" vimeoId="310582167" />
+<KalturaVideo videoid="1_q5df3gg6" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -144,7 +146,7 @@ buttons, to create a graceful transition.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} caption="Shared elements can effectively guide users through a multi-layered information architecture.">
 
-<Video title="Continuity" vimeoId="310582206" />
+<KalturaVideo videoid="1_79e8hspk" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -152,7 +154,7 @@ buttons, to create a graceful transition.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} type="dont" caption="Continuous elements are for guidance and should not distract. Always finish a sequence with the important content on page.">
 
-<Video title="Continuity should not distract" vimeoId="310582279" />
+<KalturaVideo videoid="1_3bydz1mz" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -170,7 +172,7 @@ delay should be adjusted to ensure that total time is still within 500 ms.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} caption="Table with rows loading in at staggered timing.">
 
-<Video title="Sequence and stagger" vimeoId="310582972" />
+<KalturaVideo videoid="1_6aelv7eh" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -183,7 +185,7 @@ user’s attention on them.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} caption="Sequencing of this interface prioritizes the primary button, and reserves data visualization for later when users begin to scroll, indicating intention to dive deeper.">
 
-<Video title="Sequencing" vimeoId="310582919" />
+<KalturaVideo videoid="1_sx1yy7l2" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
diff --git a/src/pages/guidelines/motion/overview.mdx b/src/pages/guidelines/motion/overview.mdx
index f4e376beaa1..dfd8e33c791 100644
--- a/src/pages/guidelines/motion/overview.mdx
+++ b/src/pages/guidelines/motion/overview.mdx
@@ -8,6 +8,7 @@ tabs: ['Overview', 'Choreography', 'Code']
 ---
 
 import { Tab } from 'carbon-components-react';
+import KalturaVideo from 'components/KalturaVideo';
 
 <PageDescription>
 
@@ -28,7 +29,7 @@ make progress.
 
 </AnchorLinks>
 
-<Video title="Motion Overview" vimeoId="281513709" />
+<KalturaVideo videoid="1_8k5q64c3"></KalturaVideo>
 
 ## Carbon in motion
 
@@ -70,13 +71,13 @@ user’s attention and offer a rhythmic break to the productive experience.
 
 <Tab label="Abstract">
 
-<Video title="Style Abstract" vimeoId="310583009" />
+<KalturaVideo videoid="1_dxffexqh" hideCaption></KalturaVideo>
 
 </Tab>
 
 <Tab label="In-situ">
 
-<Video title="Style In-situ" vimeoId="310583036" />
+<KalturaVideo videoid="1_3o97rxc1" hideCaption></KalturaVideo>
 
 </Tab>
 
@@ -101,7 +102,7 @@ for expressive motion.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} fullWidth caption="Productive moments are labeled in blue, and expressive moments are labeled in magenta.">
 
-<Video title="Expressive motion" vimeoId="310583077" />
+<KalturaVideo videoid="1_rwyr3h76" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -116,7 +117,7 @@ accelerations in motion. We commonly use one of these three types of easing.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} fullWidth caption="Elements on the screen speed up quickly and slow down smoothly, obeying the physics of a light-weight material.">
 
-<Video title="Erasing" vimeoId="310582370" />
+<KalturaVideo videoid="1_m9uqrae1" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -130,7 +131,7 @@ possible.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} type="dont" fullWidth caption="Do not use easing curves that suggest bounce, stretch, or sudden stops.">
 
-<Video title="avoid easing curves" vimeoId="310582418" />
+<KalturaVideo videoid="1_futf7n64" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -144,14 +145,14 @@ of a motion. Expanding tiles and the sorting of table rows are good examples.
 <Tab label="Curves">
 <div>
 
-<Video title="Standard easing curves 01" vimeoId="310582611" />
+<KalturaVideo videoid="1_5xp6hw4z" hideCaption></KalturaVideo>
 
 </div>
 </Tab>
 <Tab label="Examples">
 <div>
 
-<Video title="Standard easing examples 01" vimeoId="310582667" />
+<KalturaVideo videoid="1_7avpv9lf" hideCaption></KalturaVideo>
 
 </div>
 </Tab>
@@ -173,14 +174,14 @@ opening or toggle switching should also use this style.
 <Tab label="Curves">
 <div>
 
-<Video title="Standard easing curves 02" vimeoId="310582467" />
+<KalturaVideo videoid="1_cky58bmx" hideCaption></KalturaVideo>
 
 </div>
 </Tab>
 <Tab label="Examples">
 <div>
 
-<Video title="Standard easing examples 02" vimeoId="310582503" />
+<KalturaVideo videoid="1_rc683pj2" hideCaption></KalturaVideo>
 
 </div>
 </Tab>
@@ -206,14 +207,14 @@ that it would come to rest just outside the view, and ready to be recalled.
 <Tab label="Curves">
 <div>
 
-<Video title="Standard easing curves 03" vimeoId="310582530" />
+<KalturaVideo videoid="1_nncohnz0" hideCaption></KalturaVideo>
 
 </div>
 </Tab>
 <Tab label="Examples">
 <div>
 
-<Video title="Standard easing examples 03" vimeoId="310582574" />
+<KalturaVideo videoid="1_4a4zfbi2" hideCaption></KalturaVideo>
 
 </div>
 </Tab>
@@ -257,7 +258,7 @@ longer the animation takes.
 <DoDontRow>
 <DoDont colLg={8} colMd={8} caption="Duration contrast between a taller and a shorter component.">
 
-<Video title="Duration" vimeoId="310582312" />
+<KalturaVideo videoid="1_nmfn625x" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>

From fae8a4975ed89710e64fc01a799c309a7f4a7635 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Mon, 19 Aug 2024 14:18:47 -0500
Subject: [PATCH 3/3] feat: update remaining 3 videos

---
 src/pages/case-studies/ibm-commerce-platform.mdx | 5 ++++-
 src/pages/designing/tutorials.mdx                | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/pages/case-studies/ibm-commerce-platform.mdx b/src/pages/case-studies/ibm-commerce-platform.mdx
index 43eff86f2b4..b8d49561b93 100755
--- a/src/pages/case-studies/ibm-commerce-platform.mdx
+++ b/src/pages/case-studies/ibm-commerce-platform.mdx
@@ -5,6 +5,8 @@ description:
   of the new self-service purchase experience on IBM.com.
 ---
 
+import KalturaVideo from 'components/KalturaVideo';
+
 <PageDescription>
 
 Learn about how the IBM.com team adopted Carbon for the design and development
@@ -192,7 +194,8 @@ passes, users may not have even noticed that the experience had changed and
 returning users did not have to relearn the interface. Also, mixing the
 experiences meant that got the team to their final result faster.
 
-<Video vimeoId="488148768" />
+<KalturaVideo videoid="1_0hebnbgr"></KalturaVideo>
+
 <Caption>New modal sitting on the original page</Caption>
 
 ### Iterating, iterating, iterating
diff --git a/src/pages/designing/tutorials.mdx b/src/pages/designing/tutorials.mdx
index 4826b139b0e..e47675340dc 100644
--- a/src/pages/designing/tutorials.mdx
+++ b/src/pages/designing/tutorials.mdx
@@ -43,7 +43,7 @@ This video covers how to design with components and type styles, and where to
 find relevant guidance and resources while designing. It also goes through the
 steps of getting set up with the Carbon Sketch kits and grid template.
 
-<Video title="Designing with Carbon" vimeoId="457803206" />
+<KalturaVideo videoid="1_64lcccoz"></KalturaVideo>
 
 To learn more about our Sketch kits, head over to
 [Design kits](/designing/kits/sketch).
@@ -54,7 +54,7 @@ Learn about the fundamentals of using our 2x Grid. This video gives an overview
 of basic grid terminology, breakpoints, the three grid modes, and some resources
 to get started designing with the 2x Grid.
 
-<Video title="Using the 2x grid" vimeoId="457802917" />
+<KalturaVideo videoid="1_ymqlr2xg"></KalturaVideo>
 
 You can find detailed grid guidance on the
 [2x Grid](/guidelines/2x-grid/overview) page.