diff --git a/src/internal/Icons/IconDownloadVideo.tsx b/src/internal/Icons/IconDownloadVideo.tsx
new file mode 100644
index 00000000..a2239674
--- /dev/null
+++ b/src/internal/Icons/IconDownloadVideo.tsx
@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/box-arrow-down-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconDownloadVideo: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};
diff --git a/src/internal/Icons/IconFullscreen.tsx b/src/internal/Icons/IconFullscreen.tsx
new file mode 100644
index 00000000..33e6ece6
--- /dev/null
+++ b/src/internal/Icons/IconFullscreen.tsx
@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/frame-corners-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconFullscreen: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};
diff --git a/src/internal/Icons/IconPause.tsx b/src/internal/Icons/IconPause.tsx
new file mode 100644
index 00000000..eea2895f
--- /dev/null
+++ b/src/internal/Icons/IconPause.tsx
@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/pause-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconPause: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};
diff --git a/src/internal/Icons/IconPictureInPicture.tsx b/src/internal/Icons/IconPictureInPicture.tsx
new file mode 100644
index 00000000..9188113c
--- /dev/null
+++ b/src/internal/Icons/IconPictureInPicture.tsx
@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/picture-in-picture-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconPictureInPicture: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};
diff --git a/src/internal/Icons/IconPlay.tsx b/src/internal/Icons/IconPlay.tsx
new file mode 100644
index 00000000..a3f995ca
--- /dev/null
+++ b/src/internal/Icons/IconPlay.tsx
@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/play-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconPlay: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};
diff --git a/src/internal/Icons/IconSpeed.tsx b/src/internal/Icons/IconSpeed.tsx
new file mode 100644
index 00000000..b68d24db
--- /dev/null
+++ b/src/internal/Icons/IconSpeed.tsx
@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/box-arrow-down-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconSpeed: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};
diff --git a/src/internal/Icons/IconVideo.tsx b/src/internal/Icons/IconVideo.tsx
new file mode 100644
index 00000000..9bd3b693
--- /dev/null
+++ b/src/internal/Icons/IconVideo.tsx
@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/film-slate-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconVideo: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};
diff --git a/src/internal/Icons/IconVolume.tsx b/src/internal/Icons/IconVolume.tsx
new file mode 100644
index 00000000..fe8a9072
--- /dev/null
+++ b/src/internal/Icons/IconVolume.tsx
@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/speaker-high-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconVolume: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};
diff --git a/src/internal/Icons/IconVolumeOff.tsx b/src/internal/Icons/IconVolumeOff.tsx
new file mode 100644
index 00000000..85e22d4e
--- /dev/null
+++ b/src/internal/Icons/IconVolumeOff.tsx
@@ -0,0 +1,13 @@
+import type {FC, SVGProps} from 'react';
+import Icon from '@phosphor-icons/core/assets/fill/speaker-slash-fill.svg?react';
+import classNames from 'classnames';
+
+import classes from './Icon.module.css';
+
+type Props = SVGProps<SVGSVGElement> & {
+    className?: string;
+};
+
+export const IconVolumeOff: FC<Props> = ({className, ...restProps}) => {
+    return <Icon className={classNames(classes.icon, className)} {...restProps} />;
+};
diff --git a/src/internal/Icons/index.ts b/src/internal/Icons/index.ts
index 30d731c2..bd219a61 100644
--- a/src/internal/Icons/index.ts
+++ b/src/internal/Icons/index.ts
@@ -45,3 +45,11 @@ export {IconErrorOutline} from './IconErrorOutline.tsx';
 export {IconSortOff} from './IconSortOff.tsx';
 export {IconColumns} from './IconColumns.tsx';
 export {IconNumeric} from './IconNumeric.tsx';
+export {IconPlay} from './IconPlay.tsx';
+export {IconPause} from './IconPause.tsx';
+export {IconVolume} from './IconVolume.tsx';
+export {IconVolumeOff} from './IconVolumeOff.tsx';
+export {IconFullscreen} from './IconFullscreen.tsx';
+export {IconPictureInPicture} from './IconPictureInPicture.tsx';
+export {IconDownloadVideo} from './IconDownloadVideo.tsx';
+export {IconVideo} from './IconVideo.tsx';
diff --git a/src/lib/InputRange/InputRange.stories.tsx b/src/lib/InputRange/InputRange.stories.tsx
index 9682df74..68695d5d 100644
--- a/src/lib/InputRange/InputRange.stories.tsx
+++ b/src/lib/InputRange/InputRange.stories.tsx
@@ -27,6 +27,7 @@ const meta = {
         step: 1,
         scaleUnit: 'F',
         disabled: false,
+        displayScale: true,
     },
     argTypes: {
         value: {control: 'text'},
diff --git a/src/lib/InputRange/InputRange.tsx b/src/lib/InputRange/InputRange.tsx
index d48618fd..ab156f44 100644
--- a/src/lib/InputRange/InputRange.tsx
+++ b/src/lib/InputRange/InputRange.tsx
@@ -23,6 +23,10 @@ export type Props = DataAttributes &
         prefix?: FC<{className?: string} & SVGProps<SVGSVGElement> & unknown>;
         bars?: number;
         scaleUnit?: string;
+        /**
+         * Enable to display scale below input
+         */
+        displayScale?: boolean;
     };
 
 const createOptions = ({
@@ -72,6 +76,7 @@ export const InputRange = forwardRef<HTMLInputElement, Props>(
             revalidateOnFormChange,
             validation,
             errorMessage,
+            displayScale,
             ...nativeProps
         },
         ref
@@ -143,9 +148,11 @@ export const InputRange = forwardRef<HTMLInputElement, Props>(
                         min={min}
                         max={max}
                     />
-                    <datalist id={scaleId} className={classes.scale}>
-                        {createOptions({min: Number(min), max: Number(max), bars, scaleUnit})}
-                    </datalist>
+                    {displayScale && (
+                        <datalist id={scaleId} className={classes.scale}>
+                            {createOptions({min: Number(min), max: Number(max), bars, scaleUnit})}
+                        </datalist>
+                    )}
                 </div>
                 {/* TODO: add htmlFor when CSS vars hook supports it */}
                 <LocalRoot as="output" theme={theme} className={classes.output}>
diff --git a/src/lib/Video/Video.mdx b/src/lib/Video/Video.mdx
new file mode 100644
index 00000000..b08b7541
--- /dev/null
+++ b/src/lib/Video/Video.mdx
@@ -0,0 +1,24 @@
+import { Meta, ArgTypes, Story, Canvas, Source, Markdown, Primary } from "@storybook/blocks";
+import {Video} from './Video.tsx';
+import * as VideoStories from "./Video.stories.tsx";
+
+<Meta title="Components/Video" of={VideoStories} />
+
+# Video
+
+## Description
+
+`Video` component plays provided video file using Video Embed element.
+
+## Imports
+
+<Markdown>{`
+\`\`\`ts
+import {Video} from 'koval-ui';
+\`\`\`
+`}</Markdown>
+
+<Primary />
+
+<ArgTypes of={Video}/>
+
diff --git a/src/lib/Video/Video.module.css b/src/lib/Video/Video.module.css
new file mode 100644
index 00000000..e542a02f
--- /dev/null
+++ b/src/lib/Video/Video.module.css
@@ -0,0 +1,351 @@
+@import url("@/internal/inputs/stateSelectorsInteractive.css");
+@import url("@/lib/Layout/customMedia.css");
+
+.vars {
+    --width: 0px;
+    --height: 0px;
+}
+
+.container {
+    --icon-size: calc(var(--kg-size-unit) * 3);
+    --font-size: var(--kg-font-size-small);
+
+    @media (--viewport-sm) {
+        --icon-size: calc(var(--kg-size-unit) * 4);
+        --font-size: var(--kg-font-size-medium);
+    }
+
+    aspect-ratio: calc(var(--width) / var(--height));
+    height: auto;
+    max-width: 100%;
+    position: relative;
+    width: var(--width);
+
+    &:hover {
+        & .overlay-title,
+        & .overlay-controls {
+            opacity: 1;
+        }
+    }
+}
+
+.video {
+    max-height: 100%;
+    max-width: 100%;
+}
+
+@keyframes loading {
+    to {
+        background-position-x: -20%;
+    }
+}
+
+.overlay-button {
+    --button-size: calc(var(--kg-size-unit) * 10);
+
+    height: var(--button-size);
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--button-size);
+
+    & button {
+        align-items: center;
+        background-color: var(--kg-color-re);
+        border-radius: calc(var(--button-size) / 2);
+        cursor: pointer;
+        display: flex;
+        height: var(--button-size);
+        justify-content: center;
+        width: var(--button-size);
+
+        &:hover {
+            background-color: var(--kg-color-do);
+        }
+
+        &:disabled {
+            --loading-color: color-mix(
+                in srgb,
+                var(--kg-background-300) 66%,
+                var(--kg-background-100)
+            );
+
+            animation: var(--kg-time-xl) loading ease-in-out infinite;
+            background: linear-gradient(
+                    90deg,
+                    rgb(222 222 222 / 0%) 40%,
+                    rgb(222 222 222 / 50%) 50%,
+                    rgb(222 222 222 / 0%) 60%
+                )
+                var(--loading-color);
+            background-color: var(--loading-color);
+            background-position-x: 180%;
+            background-size: 200% 100%;
+            cursor: progress;
+        }
+
+        &:active {
+            & .icon {
+                transform: translate(2px, 2px);
+            }
+        }
+    }
+
+    & .icon {
+        height: calc(var(--kg-size-unit) * 6);
+        width: calc(var(--kg-size-unit) * 6);
+    }
+}
+
+.overlay-title {
+    align-items: center;
+    backdrop-filter: blur(6px);
+    background-color: color-mix(in srgb, var(--kg-color-re) 66%, transparent);
+    color: var(--kg-background-000);
+    display: flex;
+    font-size: var(--font-size);
+    gap: var(--kg-size-unit);
+    left: 0;
+    opacity: 0;
+    padding: calc(var(--kg-size-unit) * 2);
+    position: absolute;
+    right: 0;
+    text-shadow: var(--kg-text-shadow);
+    top: 0;
+    transition: opacity var(--kg-time-sm) ease-out;
+}
+
+.overlay-controls {
+    backdrop-filter: blur(6px);
+    background-color: color-mix(in srgb, var(--kg-color-re) 66%, transparent);
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--kg-size-unit);
+    left: 0;
+    opacity: 0;
+    padding: var(--kg-size-unit) calc(var(--kg-size-unit) * 2);
+    position: absolute;
+    right: 0;
+    transition: opacity var(--kg-time-sm) ease-out;
+
+    @media (--viewport-sm) {
+        gap: calc(var(--kg-size-unit) * 2);
+        padding: calc(var(--kg-size-unit) * 2);
+    }
+}
+
+.buttons-container {
+    align-items: center;
+    display: flex;
+
+    & .left {
+        align-items: center;
+        display: flex;
+        gap: calc(var(--kg-size-unit) * 2);
+    }
+
+    & .right {
+        align-items: center;
+        display: flex;
+        gap: calc(var(--kg-size-unit) * 2);
+        margin-left: auto;
+    }
+}
+
+.time-stamp {
+    align-items: center;
+    color: var(--kg-background-000);
+    display: flex;
+    gap: calc(var(--kg-size-unit) / 2);
+    text-shadow: var(--kg-text-shadow);
+
+    & .time {
+        font-size: var(--font-size);
+        font-variant-numeric: tabular-nums;
+    }
+
+    & .spacer {
+        font-size: var(--kg-font-size-large);
+    }
+}
+
+.volume {
+    /* Don't display volume control on mobile devices (aka small screens). Device settings should be used instead */
+    display: none;
+
+    @media (--viewport-sm) {
+        align-items: center;
+        display: flex;
+        gap: var(--kg-size-unit);
+    }
+
+    & .range {
+        width: calc(var(--kg-size-unit) * 16);
+    }
+}
+
+.icon {
+    color: var(--kg-background-000);
+    filter: drop-shadow(var(--kg-text-shadow));
+    height: var(--icon-size);
+    width: var(--icon-size);
+}
+
+.button-big {
+    cursor: pointer;
+
+    &:active {
+        & .icon {
+            transform: translate(1px, 1px);
+        }
+    }
+
+    @media (--viewport-sm) {
+        background: var(--kg-color-re);
+        border-radius: calc(var(--kg-size-unit) * 4);
+        padding: calc(var(--kg-size-unit) * 1.5);
+
+        &:hover {
+            background-color: var(--kg-color-do);
+        }
+    }
+}
+
+.button {
+    cursor: pointer;
+
+    &:active {
+        & .icon {
+            transform: translate(1px, 1px);
+        }
+    }
+
+    &:hover {
+        & .icon {
+            color: var(--kg-color-mi);
+        }
+    }
+}
+
+.timeline-container {
+    & .range {
+        --thumb-color: var(--kg-color-do);
+
+        width: 100%;
+    }
+}
+
+.range {
+    --track-height: calc(var(--kg-size-unit) / 3);
+    --slider-height: calc(var(--kg-size-unit) * 2);
+    --slider-width: var(--slider-height);
+    --track-color: var(--kg-background-000);
+    --track-color-active: var(--kg-color-mi);
+    --thumb-color: var(--kg-color-do);
+    --thumb-color-active: var(--kg-color-do);
+
+    filter: drop-shadow(var(--kg-text-shadow));
+
+    &::-moz-range-track {
+        background: var(--track-color);
+        height: var(--track-height);
+        transition: background-color var(--kg-time-sm) ease-in-out;
+    }
+
+    &::-webkit-slider-runnable-track {
+        appearance: none;
+        background: var(--track-color);
+        height: var(--track-height);
+        transition: background-color var(--kg-time-sm) ease-in-out;
+    }
+
+    &::-webkit-slider-thumb {
+        appearance: none;
+        background-color: var(--thumb-color);
+        border: none;
+        border-radius: 50%;
+        cursor: grab;
+        height: var(--slider-height);
+        margin-top: calc(var(--track-height) / 2 - var(--slider-height) / 2);
+        transition: background-color var(--kg-time-sm) ease-in-out;
+        width: var(--slider-width);
+    }
+
+    &::-moz-range-thumb {
+        background-color: var(--thumb-color);
+        border: none;
+        cursor: grab;
+        transition: background-color var(--kg-time-sm) ease-in-out;
+    }
+
+    &:--hoverSelector {
+        &::-moz-range-track {
+            background: var(--track-color-active);
+        }
+
+        &::-webkit-slider-runnable-track {
+            background: var(--track-color-active);
+        }
+    }
+
+    &:--disabledSelector {
+        &::-moz-range-thumb {
+            background-color: var(--kg-background-100);
+            cursor: not-allowed;
+        }
+
+        &::-webkit-slider-thumb {
+            background-color: var(--kg-background-100);
+            cursor: not-allowed;
+        }
+
+        &::-moz-range-track {
+            background: var(--kg-background-100);
+        }
+
+        &::-webkit-slider-runnable-track {
+            background: var(--kg-background-100);
+        }
+    }
+
+    &:active:not(:--disabledSelector) {
+        &::-moz-range-thumb {
+            cursor: grabbing;
+        }
+
+        &::-webkit-slider-thumb {
+            cursor: grabbing;
+        }
+    }
+
+    &:active:not(:--disabledSelector),
+    &:--focusSelector {
+        &::-moz-range-thumb {
+            background-color: var(--thumb-color-active);
+        }
+
+        &::-webkit-slider-thumb {
+            background-color: var(--thumb-color-active);
+        }
+
+        &::-moz-range-track {
+            background: var(--track-color-active);
+        }
+
+        &::-webkit-slider-runnable-track {
+            background: var(--track-color-active);
+        }
+    }
+
+    &:--invalidSelector:focus {
+        &::-moz-range-track {
+            background: var(--kg-color-error);
+        }
+
+        &::-webkit-slider-runnable-track {
+            background: var(--kg-color-error);
+        }
+    }
+}
diff --git a/src/lib/Video/Video.stories.tsx b/src/lib/Video/Video.stories.tsx
new file mode 100644
index 00000000..73231607
--- /dev/null
+++ b/src/lib/Video/Video.stories.tsx
@@ -0,0 +1,118 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {fn} from '@storybook/test';
+
+import {Video} from './Video.tsx';
+import poster from './poster.jpg';
+
+const meta = {
+    title: 'Components/Video',
+    component: Video,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    args: {
+        width: 720,
+        height: 405,
+        title: 'Big Buck Bunny',
+        poster: poster,
+        loop: false,
+        muted: false,
+        autoPlay: false,
+        enablePictureInPicture: true,
+        enableDownload: true,
+        enableFullscreen: true,
+        showControls: true,
+        showTitle: true,
+        preload: 'auto',
+        onCanPlay: fn(),
+        onReady: fn(),
+        onError: fn(),
+        onPlay: fn(),
+        onPause: fn(),
+    },
+    argTypes: {
+        width: {
+            control: 'number',
+        },
+        src: {
+            table: {
+                disable: true,
+            },
+        },
+        sources: {
+            table: {
+                disable: true,
+            },
+        },
+        className: {
+            table: {
+                disable: true,
+            },
+        },
+        id: {
+            table: {
+                disable: true,
+            },
+        },
+        role: {
+            table: {
+                disable: true,
+            },
+        },
+        onCanPlay: {
+            table: {
+                disable: true,
+            },
+        },
+        onReady: {
+            table: {
+                disable: true,
+            },
+        },
+        onError: {
+            table: {
+                disable: true,
+            },
+        },
+        onPlay: {
+            table: {
+                disable: true,
+            },
+        },
+        onPause: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+} as Meta<typeof Video>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+    name: 'Single source example',
+    render: args => {
+        return <Video {...args} />;
+    },
+    args: {
+        // @ts-expect-error TODO: some strange type issue with mutually exclusive props
+        src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    },
+};
+
+export const Sources: Story = {
+    name: 'Sources list example',
+    render: args => {
+        return <Video {...args} />;
+    },
+    args: {
+        // @ts-expect-error TODO: some strange type issue with mutually exclusive props
+        sources: [
+            {
+                src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+                type: 'video/mp4',
+            },
+        ],
+    },
+};
diff --git a/src/lib/Video/Video.tsx b/src/lib/Video/Video.tsx
new file mode 100644
index 00000000..3303c390
--- /dev/null
+++ b/src/lib/Video/Video.tsx
@@ -0,0 +1,458 @@
+import type {SyntheticEvent, ChangeEvent} from 'react';
+import {useState, useCallback, forwardRef, useEffect, useMemo} from 'react';
+import classNames from 'classnames';
+import {useLocalTheme} from 'css-vars-hook';
+
+import type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';
+import {
+    IconPause,
+    IconPlay,
+    IconVolume,
+    IconVolumeOff,
+    IconFullscreen,
+    IconPictureInPicture,
+    IconDownloadVideo,
+    IconVideo,
+} from '@/internal/Icons';
+import {useInternalRef} from '@/internal/hooks/useInternalRef.ts';
+
+import classes from './Video.module.css';
+
+export type Source = {
+    src: string;
+    /**
+     * Provide the source video MIME type
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#type
+     */
+    type?: string;
+    /**
+     * Provide media condition for the source video
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#media
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries
+     */
+    mediaCondition?: string;
+};
+
+enum PreloadModes {
+    none = 'none',
+    metadata = 'metadata',
+    auto = 'auto',
+}
+
+export type Props = DataAttributes &
+    LibraryProps & {
+        /**
+         * Set the width of the video file
+         */
+        width?: number | '100%';
+        /**
+         * Set the height of the video file
+         */
+        height?: number;
+        /**
+         * A URL for an image to be shown while the video is downloading.
+         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#poster
+         */
+        poster?: string;
+        /**
+         * Enable to automatically seek back to the start upon reaching the end of the video
+         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#loop
+         */
+        loop?: boolean;
+        /**
+         * Enable to silence the audio during playback
+         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#muted
+         */
+        muted?: boolean;
+        /**
+         * Select loading mode
+         * `none` – video shouldn't be preloaded.
+         * `metadata` – only video metadata (for example, length) is fetched.
+         * `auto` – whole video file can be downloaded.
+         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#preload
+         */
+        preload?: keyof typeof PreloadModes;
+        /**
+         * Enable to play video automatically when it loads
+         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#autoplay
+         */
+        autoPlay?: boolean;
+        /**
+         * Show Picture-in-picture mode switch
+         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#disablepictureinpicture
+         */
+        enablePictureInPicture?: boolean;
+        /**
+         * Display the download video button
+         */
+        enableDownload?: boolean;
+        /**
+         * Show the fullscreen mode button
+         */
+        enableFullscreen?: boolean;
+        /**
+         * Show video play controls
+         */
+        showControls?: boolean;
+        /**
+         * Show video title
+         */
+        showTitle?: boolean;
+        /**
+         * Provide a title for the video
+         */
+        title?: string;
+        /**
+         * Set a callback to run when the video is ready to play on the user side
+         */
+        onReady?: (event: SyntheticEvent<HTMLVideoElement>) => void;
+        /**
+         * Set a callback to capture video errors
+         */
+        onError?: (event: SyntheticEvent<HTMLVideoElement>) => void;
+        /**
+         * Set a callback to run when the user plays the video
+         */
+        onPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void;
+        /**
+         * Set a callback to run when the user pauses the video
+         */
+        onPause?: (event: SyntheticEvent<HTMLVideoElement>) => void;
+    } & (
+        | {
+              /**
+               * Provide video url
+               * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#src
+               */
+              src?: string;
+              /**
+               * Provide video sources configs array. An advanced alternative to `src` prop
+               * @see SourceDensity
+               * @see SourceWidth
+               */
+              sources?: never;
+          }
+        | {
+              /**
+               * Provide video url
+               * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#src
+               */
+              src?: never;
+              /**
+               * Provide video sources configs array. An advanced alternative to `src` prop
+               * @see SourceDensity
+               * @see SourceWidth
+               */
+              sources?: Source[];
+          }
+    );
+
+// http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
+
+const getFormattedTime = (totalSeconds = 0) => {
+    const minutes = new Intl.NumberFormat(undefined, {minimumIntegerDigits: 2}).format(
+        Math.floor(totalSeconds / 60)
+    );
+    const seconds = new Intl.NumberFormat(undefined, {minimumIntegerDigits: 2}).format(
+        Math.floor(totalSeconds % 60)
+    );
+    return `${minutes}:${seconds}`;
+};
+
+enum PlayModes {
+    play = 'play',
+    pause = 'pause',
+    pristine = 'pristine',
+}
+
+const getFileName = (url?: string) => {
+    const splitted = url?.split('/') || [];
+    return splitted[splitted.length - 1];
+};
+
+const normalizeSize = (size?: number | string) => {
+    if (typeof size === 'string') {
+        return size;
+    } else {
+        return `${size}px`;
+    }
+};
+
+export const Video = forwardRef<HTMLVideoElement, Props>(
+    (
+        {
+            className,
+            width = '100%',
+            height,
+            poster,
+            src,
+            sources = [],
+            loop = false,
+            muted: mutedProp = false,
+            preload = PreloadModes.auto,
+            autoPlay = false,
+            enablePictureInPicture = true,
+            enableDownload = true,
+            enableFullscreen = true,
+            showControls = true,
+            showTitle = true,
+            title,
+            onReady = () => {},
+            onError = () => {},
+            onPlay = () => {},
+            onPause = () => {},
+            ...nativeProps
+        },
+        ref
+    ) => {
+        const videoRef = useInternalRef(ref);
+
+        const [playMode, setPlayMode] = useState<PlayModes>(PlayModes.pristine);
+
+        const handlePlay = useCallback(
+            (event: SyntheticEvent<HTMLVideoElement>) => {
+                setPlayMode(PlayModes.play);
+                onPlay(event);
+            },
+            [onPlay]
+        );
+
+        const handlePause = useCallback(
+            (event: SyntheticEvent<HTMLVideoElement>) => {
+                setPlayMode(PlayModes.pause);
+                onPause(event);
+            },
+            [onPause]
+        );
+
+        const handleTogglePlay = useCallback(() => {
+            if (playMode === PlayModes.play) {
+                videoRef.current?.pause();
+                setPlayMode(PlayModes.pause);
+            } else {
+                videoRef.current?.play();
+                setPlayMode(PlayModes.play);
+            }
+        }, [playMode, videoRef]);
+
+        const [duration, setDuration] = useState(0);
+
+        const handleLoadedMetaData = useCallback(() => {
+            videoRef.current?.duration && setDuration(videoRef.current?.duration);
+        }, [videoRef]);
+
+        const [isFullScreen, setFullScreen] = useState(false);
+
+        const handleFullscreen = useCallback(() => {
+            videoRef.current?.requestFullscreen();
+        }, [videoRef]);
+
+        // this effect is required for Firefox, which doesn't display controls in full-screen mode
+        useEffect(() => {
+            const videoRefMemo = videoRef.current;
+            const handleScreenChange = () => {
+                setFullScreen(document.fullscreenElement === videoRef.current);
+            };
+            videoRefMemo?.addEventListener('fullscreenchange', handleScreenChange);
+            return () => {
+                videoRefMemo?.removeEventListener('fullscreenchange', handleScreenChange);
+            };
+        }, [videoRef]);
+
+        const [volume, setVolume] = useState(0);
+
+        const handleSetVolume = useCallback(
+            (event: ChangeEvent<HTMLInputElement>) => {
+                setVolume(Number(event.target.value) || 0);
+                videoRef.current!.volume = Number(event.target.value) || 0;
+            },
+            [videoRef]
+        );
+
+        const [currentTime, setCurrentTime] = useState(0);
+
+        useEffect(() => {
+            const handler = () => {
+                videoRef.current?.currentTime &&
+                    playMode === PlayModes.play &&
+                    videoRef.current?.currentTime !== currentTime &&
+                    setCurrentTime(videoRef.current?.currentTime);
+            };
+            const intervalId = setInterval(handler, 1000);
+            return () => {
+                clearInterval(intervalId);
+            };
+        }, [currentTime, playMode, videoRef]);
+
+        const handleSetTime = useCallback(
+            (event: ChangeEvent<HTMLInputElement>) => {
+                setCurrentTime(Number(event.target.value));
+                videoRef.current!.currentTime = Number(event.target.value);
+            },
+            [videoRef]
+        );
+
+        const IconTogglePlay = useMemo(() => {
+            return playMode === PlayModes.pause || playMode === PlayModes.pristine
+                ? IconPlay
+                : IconPause;
+        }, [playMode]);
+
+        const [muted, setMuted] = useState(mutedProp);
+
+        useEffect(() => {
+            setMuted(mutedProp);
+        }, [mutedProp]);
+
+        const handleToggleMuted = useCallback(() => {
+            setMuted(!muted);
+        }, [muted]);
+
+        useEffect(() => {
+            setVolume(Number(videoRef.current?.volume || 0));
+        }, [muted, videoRef]);
+
+        const IconToggleVolume = useMemo(() => {
+            return muted ? IconVolumeOff : IconVolume;
+        }, [muted]);
+
+        const handlePip = useCallback(() => {
+            videoRef.current?.requestPictureInPicture?.();
+        }, [videoRef]);
+
+        const {LocalRoot} = useLocalTheme();
+
+        const theme = useMemo(
+            () => ({width: normalizeSize(width), height: normalizeSize(height)}),
+            [height, width]
+        );
+
+        const [readyToPlay, setReadyToPlay] = useState(false);
+
+        const handleCanPlay = useCallback(
+            (event: SyntheticEvent<HTMLVideoElement>) => {
+                setReadyToPlay(true);
+                onReady(event);
+            },
+            [onReady]
+        );
+
+        const handleError = useCallback(
+            (event: SyntheticEvent<HTMLVideoElement>) => {
+                onError(event);
+            },
+            [onError]
+        );
+
+        return (
+            <LocalRoot theme={theme} className={classes.container}>
+                <video
+                    {...nativeProps}
+                    src={src}
+                    poster={poster}
+                    className={classNames(classes.video, className)}
+                    controls={isFullScreen}
+                    width={width}
+                    loop={loop}
+                    muted={muted}
+                    preload={preload}
+                    autoPlay={autoPlay}
+                    disablePictureInPicture={!enablePictureInPicture}
+                    onCanPlay={handleCanPlay}
+                    onError={handleError}
+                    onLoadedMetadata={handleLoadedMetaData}
+                    onPause={handlePause}
+                    onPlay={handlePlay}
+                    onStalled={handleError}
+                    ref={videoRef}>
+                    {sources.map(({src, type, mediaCondition}) => {
+                        return <source key={src} src={src} type={type} media={mediaCondition} />;
+                    })}
+                </video>
+                {playMode === PlayModes.pristine && (
+                    <div className={classes.overlayButton}>
+                        <button onClick={handleTogglePlay} disabled={!readyToPlay}>
+                            <IconPlay className={classes.icon} />
+                        </button>
+                    </div>
+                )}
+                {playMode !== PlayModes.pristine && showTitle && (
+                    <div className={classes.overlayTitle}>
+                        <IconVideo className={classes.icon} />
+                        <span>{title}</span>
+                    </div>
+                )}
+                {playMode !== PlayModes.pristine && showControls && (
+                    <div className={classes.overlayControls}>
+                        <div className={classes.timelineContainer}>
+                            <input
+                                className={classes.range}
+                                type="range"
+                                onChange={handleSetTime}
+                                value={currentTime}
+                                name="seek"
+                                min={0}
+                                max={duration}
+                                step={1}
+                            />
+                        </div>
+                        <div className={classes.buttonsContainer}>
+                            <div className={classes.left}>
+                                <button className={classes.buttonBig} onClick={handleTogglePlay}>
+                                    <IconTogglePlay className={classes.icon} />
+                                </button>
+                                <div className={classes.timeStamp}>
+                                    <span className={classes.time}>
+                                        {getFormattedTime(currentTime)}
+                                    </span>
+                                    <span className={classes.spacer}>/</span>
+                                    <span className={classes.time}>
+                                        {getFormattedTime(duration)}
+                                    </span>
+                                </div>
+                            </div>
+
+                            <div className={classes.right}>
+                                <fieldset className={classes.volume}>
+                                    <button className={classes.button} onClick={handleToggleMuted}>
+                                        <IconToggleVolume className={classes.icon} />
+                                    </button>
+                                    <input
+                                        type="range"
+                                        name="volume"
+                                        min={0}
+                                        max={1}
+                                        step={0.01}
+                                        value={muted ? 0 : volume}
+                                        onChange={handleSetVolume}
+                                        className={classes.range}
+                                    />
+                                </fieldset>
+                                {enableDownload && (
+                                    <a
+                                        href={videoRef.current?.currentSrc}
+                                        download={getFileName(videoRef.current?.currentSrc)}
+                                        className={classes.button}>
+                                        <IconDownloadVideo className={classes.icon} />
+                                    </a>
+                                )}
+                                {enablePictureInPicture && (
+                                    <button className={classes.button} onClick={handlePip}>
+                                        <IconPictureInPicture className={classes.icon} />
+                                    </button>
+                                )}
+                                {enableFullscreen && (
+                                    <button className={classes.button} onClick={handleFullscreen}>
+                                        <IconFullscreen className={classes.icon} />
+                                    </button>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </LocalRoot>
+        );
+    }
+);
+
+Video.displayName = 'Video';
diff --git a/src/lib/Video/index.ts b/src/lib/Video/index.ts
new file mode 100644
index 00000000..eb2a63bd
--- /dev/null
+++ b/src/lib/Video/index.ts
@@ -0,0 +1 @@
+export {Video} from './Video.tsx';
diff --git a/src/lib/Video/poster.jpg b/src/lib/Video/poster.jpg
new file mode 100644
index 00000000..25f81e38
Binary files /dev/null and b/src/lib/Video/poster.jpg differ