diff --git a/package.json b/package.json
index 3531da5..c84cc05 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@graphql-codegen/typescript-operations": "^2.3.5",
     "@juggle/resize-observer": "^3.3.1",
     "@radix-ui/react-polymorphic": "^0.0.14",
+    "@reach/dialog": "^0.17.0",
     "@types/lodash": "^4.14.182",
     "@types/marked": "^4.0.3",
     "clsx": "^1.1.1",
@@ -47,6 +48,7 @@
     "react-merge-refs": "^1.1.0",
     "react-query": "^3.35.0",
     "react-use-measure": "^2.1.1",
+    "react-youtube": "^9.0.2",
     "sharp": "^0.30.4",
     "tiny-json-http": "^7.4.2"
   },
diff --git a/src/components/common/modal/index.tsx b/src/components/common/modal/index.tsx
new file mode 100644
index 0000000..35b48a1
--- /dev/null
+++ b/src/components/common/modal/index.tsx
@@ -0,0 +1,28 @@
+import '@reach/dialog/styles.css'
+
+import { DialogContent, DialogOverlay } from '@reach/dialog'
+import { ReactNode } from 'react'
+
+import s from './modal.module.scss'
+
+interface Props {
+  children: ReactNode
+  showDialog: boolean
+  close: () => void
+}
+
+function Modal({ children, showDialog, close }: Props) {
+  return (
+    <DialogOverlay
+      className={s.modal__bg}
+      isOpen={showDialog}
+      onDismiss={close}
+    >
+      <DialogContent aria-label="modal opened" className={s.modal}>
+        {children}
+      </DialogContent>
+    </DialogOverlay>
+  )
+}
+
+export default Modal
diff --git a/src/components/common/modal/modal.module.scss b/src/components/common/modal/modal.module.scss
new file mode 100644
index 0000000..3a9e82d
--- /dev/null
+++ b/src/components/common/modal/modal.module.scss
@@ -0,0 +1,40 @@
+@import '~/css/helpers';
+
+.modal {
+  @include respond-to('mobile') {
+    width: 90vw;
+  }
+
+  min-width: tovw(600px, 'default', 600px);
+  background-color: unset;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 50vw;
+  transform: translate(-50%, -50%);
+  padding: 0;
+  margin: 0;
+  animation: fadein 1200ms;
+
+  &__bg {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgb(0 0 0 / 0.5);
+    z-index: 50;
+    backdrop-filter: blur(2px);
+    animation: fadein 800ms;
+  }
+}
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/src/components/common/video/index.tsx b/src/components/common/video/index.tsx
new file mode 100644
index 0000000..b036d8d
--- /dev/null
+++ b/src/components/common/video/index.tsx
@@ -0,0 +1,28 @@
+import YouTube from 'react-youtube'
+
+import s from './video.module.scss'
+
+interface Props {
+  videoLink: string
+}
+
+function Video({ videoLink }: Props) {
+  const youtubeOptions = {
+    height: '100%',
+    width: '100%',
+    frameBorder: '0',
+    playerVars: {
+      autoplay: 0,
+      rel: 0,
+      modestbranding: 1
+    }
+  }
+
+  return (
+    <div className={s.video__container}>
+      <YouTube opts={youtubeOptions} videoId={videoLink} />
+    </div>
+  )
+}
+
+export default Video
diff --git a/src/components/common/video/video.module.scss b/src/components/common/video/video.module.scss
new file mode 100644
index 0000000..05cad37
--- /dev/null
+++ b/src/components/common/video/video.module.scss
@@ -0,0 +1,29 @@
+// .video__container {
+//   width: 80vw;
+//   aspect-ratio: 16 / 9;
+//   border-top: 5px solid var(--color-grey-light);
+//   border-bottom: 5px solid var(--color-grey-light);
+// }
+
+@import '~/css/helpers';
+
+.video__container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  filter: opacity(100%) grayscale(0);
+  transition: filter 900ms;
+  border-top: tovw(1px, 'default', 1px) solid var(--color-white);
+  border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
+  aspect-ratio: 16 / 9;
+
+  > div {
+    width: 100%;
+    height: 100%;
+
+    iframe {
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
diff --git a/src/components/sections/newsroom/media/index.tsx b/src/components/sections/newsroom/media/index.tsx
index 501dca6..c5769f6 100644
--- a/src/components/sections/newsroom/media/index.tsx
+++ b/src/components/sections/newsroom/media/index.tsx
@@ -1,8 +1,12 @@
 import { useKeenSlider } from 'keen-slider/react'
+import { useEffect, useState } from 'react'
 
+import Modal from '~/components/common/modal'
+import Video from '~/components/common/video'
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
 import Heading from '~/components/primitives/heading'
+import { useMedia } from '~/hooks/use-media'
 
 import s from './media.module.scss'
 
@@ -21,6 +25,17 @@ interface Props {
 }
 
 const Media = ({ data }: Props) => {
+  const isMobile = useMedia('(max-width: 900px)')
+
+  const [showDialog, setShowDialog] = useState(false)
+  const [videoLink, setVideoLink] = useState<string>('')
+
+  const close = () => setShowDialog(false)
+  const open = (link: string) => {
+    setVideoLink(link)
+    setShowDialog(true)
+  }
+
   const [sliderRef] = useKeenSlider<HTMLDivElement>({
     initial: 0,
     loop: true,
@@ -35,99 +50,133 @@ const Media = ({ data }: Props) => {
     }
   })
 
+  useEffect(() => {
+    const html = document.querySelector('html')
+
+    if (showDialog) {
+      showDialog && html?.style.setProperty('overflow', 'hidden')
+      showDialog &&
+        html?.style.setProperty('margin-right', `${!isMobile ? '17px' : '0px'}`)
+    }
+
+    if (!showDialog) {
+      !showDialog && html?.style.removeProperty('overflow')
+      !showDialog && html?.style.removeProperty('margin-right')
+    }
+  }, [isMobile, showDialog])
+
   return (
-    <Section className={s['section']}>
-      <Container className={s['container']}>
-        <div className={s['header']}>
-          <Heading as="h2" variant="md">
-            {data?.mediaHeading}
-          </Heading>
-          <span>04</span>
-        </div>
-        <div className={`${s.media__block} keen-slider`} ref={sliderRef}>
-          <div className={`${s.item} keen-slider__slide`}>
-            <div className={s['image__container']}>
-              <img
-                alt="image"
-                loading="lazy"
-                src="/images/newsroom/prev01.jpg"
-              />
-              <img
-                alt="play"
-                loading="lazy"
-                className={s.play}
-                src="/images/newsroom/play.svg"
-              />
+    <>
+      <Section className={s['section']}>
+        <Container className={s['container']}>
+          <div className={s['header']}>
+            <Heading as="h2" variant="md">
+              {data?.mediaHeading}
+            </Heading>
+            <span>04</span>
+          </div>
+          <div className={`${s.media__block} keen-slider`} ref={sliderRef}>
+            <div className={`${s.item} keen-slider__slide`}>
+              <div
+                className={s['image__container']}
+                onClick={() => open(data?.mediaVideo01Link)}
+              >
+                <img
+                  alt="image"
+                  loading="lazy"
+                  src="/images/newsroom/prev01.jpg"
+                />
+                <img
+                  alt="play"
+                  loading="lazy"
+                  className={s.play}
+                  src="/images/newsroom/play.svg"
+                />
+              </div>
+              <div className={s['content']}>
+                <Heading as="h2" variant="sm" font="tthoves">
+                  {data?.mediaVideo01Label}
+                </Heading>
+              </div>
             </div>
-            <div className={s['content']}>
-              <Heading as="h2" variant="sm" font="tthoves">
-                {data?.mediaVideo01Label}
-              </Heading>
+            <div className={`${s.item} keen-slider__slide`}>
+              <div
+                className={s['image__container']}
+                onClick={() => open(data?.mediaVideo02Link)}
+              >
+                <img
+                  alt="image"
+                  loading="lazy"
+                  src="/images/newsroom/prev02.jpg"
+                />
+                <img
+                  alt="play"
+                  loading="lazy"
+                  className={s.play}
+                  src="/images/newsroom/play.svg"
+                />
+              </div>
+              <div className={s['content']}>
+                <Heading as="h2" variant="sm" font="tthoves">
+                  {data?.mediaVideo02Label}
+                </Heading>
+              </div>
+            </div>
+            <div className={`${s.item} keen-slider__slide`}>
+              <div
+                className={s['image__container']}
+                onClick={() => open(data?.mediaVideo03Link)}
+              >
+                <img
+                  alt="image"
+                  loading="lazy"
+                  src="/images/newsroom/prev03.jpg"
+                />
+                <img
+                  alt="play"
+                  loading="lazy"
+                  className={s.play}
+                  src="/images/newsroom/play.svg"
+                />
+              </div>
+              <div className={s['content']}>
+                <Heading as="h2" variant="sm" font="tthoves">
+                  {data?.mediaVideo03Label}
+                </Heading>
+              </div>
+            </div>
+            <div className={`${s.item} keen-slider__slide`}>
+              <div
+                className={s['image__container']}
+                onClick={() => open(data?.mediaVideo04Link)}
+              >
+                <img
+                  alt="image"
+                  loading="lazy"
+                  src="/images/newsroom/prev04.jpg"
+                />
+                <img
+                  alt="play"
+                  loading="lazy"
+                  className={s.play}
+                  src="/images/newsroom/play.svg"
+                />
+              </div>
+              <div className={s['content']}>
+                <Heading as="h2" variant="sm" font="tthoves">
+                  {data?.mediaVideo04Label}
+                </Heading>
+              </div>
             </div>
           </div>
-          <div className={`${s.item} keen-slider__slide`}>
-            <div className={s['image__container']}>
-              <img
-                alt="image"
-                loading="lazy"
-                src="/images/newsroom/prev02.jpg"
-              />
-              <img
-                alt="play"
-                loading="lazy"
-                className={s.play}
-                src="/images/newsroom/play.svg"
-              />
-            </div>
-            <div className={s['content']}>
-              <Heading as="h2" variant="sm" font="tthoves">
-                {data?.mediaVideo02Label}
-              </Heading>
-            </div>
-          </div>
-          <div className={`${s.item} keen-slider__slide`}>
-            <div className={s['image__container']}>
-              <img
-                alt="image"
-                loading="lazy"
-                src="/images/newsroom/prev03.jpg"
-              />
-              <img
-                alt="play"
-                loading="lazy"
-                className={s.play}
-                src="/images/newsroom/play.svg"
-              />
-            </div>
-            <div className={s['content']}>
-              <Heading as="h2" variant="sm" font="tthoves">
-                {data?.mediaVideo03Label}
-              </Heading>
-            </div>
-          </div>
-          <div className={`${s.item} keen-slider__slide`}>
-            <div className={s['image__container']}>
-              <img
-                alt="image"
-                loading="lazy"
-                src="/images/newsroom/prev04.jpg"
-              />
-              <img
-                alt="play"
-                loading="lazy"
-                className={s.play}
-                src="/images/newsroom/play.svg"
-              />
-            </div>
-            <div className={s['content']}>
-              <Heading as="h2" variant="sm" font="tthoves">
-                {data?.mediaVideo04Label}
-              </Heading>
-            </div>
-          </div>
-        </div>
-      </Container>
-    </Section>
+        </Container>
+      </Section>
+
+      <Modal showDialog={showDialog} close={close}>
+        <Video videoLink={videoLink} />
+        {/* <div>culo</div> */}
+      </Modal>
+    </>
   )
 }
 
diff --git a/src/css/global.scss b/src/css/global.scss
index a11ef57..2d6c6eb 100644
--- a/src/css/global.scss
+++ b/src/css/global.scss
@@ -76,8 +76,8 @@ html.has-custom-cursor ::before {
 }
 
 body {
-  background-color: var(--color-black);
   overflow-x: hidden;
+  background-color: var(--color-black);
   color: var(--color-white);
   font-family: var(--font-tthoves);
 }
diff --git a/yarn.lock b/yarn.lock
index bb24314..1de9576 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -436,6 +436,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.13":
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
+  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -1009,6 +1016,35 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz#fc6cefee6686db8c5a7ff14c8c1b9b5abdee325b"
   integrity sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==
 
+"@reach/dialog@^0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.17.0.tgz#81c48dd4405945dfc6b6c3e5e125db2c4324e9e8"
+  integrity sha512-AnfKXugqDTGbeG3c8xDcrQDE4h9b/vnc27Sa118oQSquz52fneUeX9MeFb5ZEiBJK8T5NJpv7QUTBIKnFCAH5A==
+  dependencies:
+    "@reach/portal" "0.17.0"
+    "@reach/utils" "0.17.0"
+    prop-types "^15.7.2"
+    react-focus-lock "^2.5.2"
+    react-remove-scroll "^2.4.3"
+    tslib "^2.3.0"
+
+"@reach/portal@0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.17.0.tgz#1dd69ffc8ffc8ba3e26dd127bf1cc4b15f0c6bdc"
+  integrity sha512-+IxsgVycOj+WOeNPL2NdgooUdHPSY285wCtj/iWID6akyr4FgGUK7sMhRM9aGFyrGpx2vzr+eggbUmAVZwOz+A==
+  dependencies:
+    "@reach/utils" "0.17.0"
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
+"@reach/utils@0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.17.0.tgz#3d1d2ec56d857f04fe092710d8faee2b2b121303"
+  integrity sha512-M5y8fCBbrWeIsxedgcSw6oDlAMQDkl5uv3VnMVJ7guwpf4E48Xlh1v66z/1BgN/WYe2y8mB/ilFD2nysEfdGeA==
+  dependencies:
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
 "@rushstack/eslint-patch@1.0.8":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.0.8.tgz#be3e914e84eacf16dbebd311c0d0b44aa1174c64"
@@ -2157,7 +2193,7 @@ debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, d
   dependencies:
     ms "2.1.2"
 
-debug@^2.1.3, debug@^2.6.9:
+debug@^2.1.3, debug@^2.6.6, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -2257,6 +2293,11 @@ detect-libc@^2.0.0, detect-libc@^2.0.1:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.1.tgz#e1897aa88fa6ad197862937fbc0441ef352ee0cd"
   integrity sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==
 
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 detect-node@^2.0.4, detect-node@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
@@ -2764,7 +2805,7 @@ extract-files@^9.0.0:
   resolved "https://registry.yarnpkg.com/extract-files/-/extract-files-9.0.0.tgz#8a7744f2437f81f5ed3250ed9f1550de902fe54a"
   integrity sha512-CvdFfHkC95B4bBBk36hcEmvdR2awOdhhVUYH6S/zrVj3477zven/fJMYg7121h4T1xHZC+tetUpubpAhxwI7hQ==
 
-fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+fast-deep-equal@3.1.3, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@@ -2896,6 +2937,13 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
+focus-lock@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.11.2.tgz#aeef3caf1cea757797ac8afdebaec8fd9ab243ed"
+  integrity sha512-pZ2bO++NWLHhiKkgP1bEXHhR1/OjVcSvlCJ98aNJDFeb7H5OOQaO+SKOZle6041O9rv2tmbrO4JzClAvDUHf0g==
+  dependencies:
+    tslib "^2.0.3"
+
 form-data-encoder@^1.7.1:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/form-data-encoder/-/form-data-encoder-1.7.2.tgz#1f1ae3dccf58ed4690b86d87e4f57c654fbab040"
@@ -2976,6 +3024,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-stdin@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-8.0.0.tgz#cbad6a73feb75f6eeb22ba9e01f89aa28aa97a53"
@@ -3917,6 +3970,11 @@ listr@^0.14.3:
     p-map "^2.0.0"
     rxjs "^6.3.3"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -4828,7 +4886,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.8.1:
+prop-types@15.8.1, prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -4870,6 +4928,13 @@ rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-clientside-effect@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"
+  integrity sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+
 react-datocms@^3.0.12:
   version "3.0.12"
   resolved "https://registry.yarnpkg.com/react-datocms/-/react-datocms-3.0.12.tgz#d0cccb0bf0171569cb2f48e86a420fca4a4fb790"
@@ -4902,6 +4967,18 @@ react-fast-marquee@^1.3.1:
   resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.3.1.tgz#e026ecbf95e73f287c94af9233bed5886913883c"
   integrity sha512-JUlQMU+IVVNKV+D4BRfRaNEaBj+VyHcI0uupBKyeFhkSY2GBkKw7oGvpNdCkPtKd8Q3H0M5eY7PyUj7AdmKCRA==
 
+react-focus-lock@^2.5.2:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.9.1.tgz#094cfc19b4f334122c73bb0bff65d77a0c92dd16"
+  integrity sha512-pSWOQrUmiKLkffPO6BpMXN7SNKXMsuOakl652IBuALAu1esk+IcpJyM+ALcYzPTTFz1rD0R54aB9A4HuP5t1Wg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    focus-lock "^0.11.2"
+    prop-types "^15.6.2"
+    react-clientside-effect "^1.2.6"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-hook-form@^7.30.0:
   version "7.30.0"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.30.0.tgz#c9e2fd54d3627e43bd94bf38ef549df2e80c1371"
@@ -4940,6 +5017,34 @@ react-query@^3.35.0:
     broadcast-channel "^3.4.1"
     match-sorter "^6.0.2"
 
+react-remove-scroll-bar@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.1.tgz#9f13b05b249eaa57c8d646c1ebb83006b3581f5f"
+  integrity sha512-IvGX3mJclEF7+hga8APZczve1UyGMkMG+tjS0o/U1iLgvZRpjFAQEUBJ4JETfvbNlfNnZnoDyWJCICkA15Mghg==
+  dependencies:
+    react-style-singleton "^2.2.0"
+    tslib "^2.0.0"
+
+react-remove-scroll@^2.4.3:
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.3.tgz#a152196e710e8e5811be39dc352fd8a90b05c961"
+  integrity sha512-NQ1bXrxKrnK5pFo/GhLkXeo3CrK5steI+5L+jynwwIemvZyfXqaL0L5BzwJd7CSwNCU723DZaccvjuyOdoy3Xw==
+  dependencies:
+    react-remove-scroll-bar "^2.3.1"
+    react-style-singleton "^2.2.0"
+    tslib "^2.0.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
+react-style-singleton@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.0.tgz#70f45f5fef97fdb9a52eed98d1839fa6b9032b22"
+  integrity sha512-nK7mN92DMYZEu3cQcAhfwE48NpzO5RpxjG4okbSqRRbfal9Pk+fG2RdQXTMp+f6all1hB9LIJSt+j7dCYrU11g==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
 react-use-measure@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.1.1.tgz#5824537f4ee01c9469c45d5f7a8446177c6cc4ba"
@@ -4947,6 +5052,15 @@ react-use-measure@^2.1.1:
   dependencies:
     debounce "^1.2.1"
 
+react-youtube@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/react-youtube/-/react-youtube-9.0.2.tgz#86edf107b5c8537e7e46eb79b1b26f52de728d8b"
+  integrity sha512-qgNXo+axgsWtEqZlesSy+ruV2xaDW2NQFTFx0zqfeA3QyE8QEsyLMuTCF6aC4LyMMf+LsHCSGQw2gTngVkb6NQ==
+  dependencies:
+    fast-deep-equal "3.1.3"
+    prop-types "15.8.1"
+    youtube-player "5.5.2"
+
 react@^18.0.0:
   version "18.0.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
@@ -5361,6 +5475,11 @@ sirv@^1.0.7:
     mrmime "^1.0.0"
     totalist "^1.0.0"
 
+sister@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/sister/-/sister-3.0.2.tgz#bb3e39f07b1f75bbe1945f29a27ff1e5a2f26be4"
+  integrity sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -5851,6 +5970,11 @@ tiny-json-http@^7.4.2:
   resolved "https://registry.yarnpkg.com/tiny-json-http/-/tiny-json-http-7.4.2.tgz#2948d7a7f650d69df65f10982f126b5c5520ce3d"
   integrity sha512-+3ns4PfQTLaF69zGASkAfDoOEVmwYTXSDrU6VR93h317uFOW7evFzKa7Ih9JzPHiYSee3lUXHLAGhws2wFSexQ==
 
+tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 title-case@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/title-case/-/title-case-3.0.3.tgz#bc689b46f02e411f1d1e1d081f7c3deca0489982"
@@ -5939,6 +6063,11 @@ tslib@^2, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@~2.3.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
+tslib@^2.0.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -6068,6 +6197,13 @@ url-parse-lax@^3.0.0:
   dependencies:
     prepend-http "^2.0.0"
 
+use-callback-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
+  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+  dependencies:
+    tslib "^2.0.0"
+
 use-deep-compare-effect@^1.6.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz#ef0ce3b3271edb801da1ec23bf0754ef4189d0c6"
@@ -6076,6 +6212,14 @@ use-deep-compare-effect@^1.6.1:
     "@babel/runtime" "^7.12.5"
     dequal "^2.0.2"
 
+use-sidecar@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -6332,3 +6476,12 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+youtube-player@5.5.2:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/youtube-player/-/youtube-player-5.5.2.tgz#052b86b1eabe21ff331095ffffeae285fa7f7cb5"
+  integrity sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==
+  dependencies:
+    debug "^2.6.6"
+    load-script "^1.0.0"
+    sister "^3.0.0"