diff --git a/public/images/poster.png b/public/images/poster.png
new file mode 100644
index 0000000..1281b0a
Binary files /dev/null and b/public/images/poster.png differ
diff --git a/public/videos/video.mp4 b/public/videos/video.mp4
new file mode 100644
index 0000000..04fe45a
Binary files /dev/null and b/public/videos/video.mp4 differ
diff --git a/src/components/Video/Video.stories.tsx b/src/components/Video/Video.stories.tsx
new file mode 100644
index 0000000..8b36cba
--- /dev/null
+++ b/src/components/Video/Video.stories.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+
+import docs from './docs.mdx';
+import Video, { VideoProps } from './Video';
+
+export default {
+  title: 'Components/Content/Video',
+  parameters: {
+    docs: {
+      page: docs
+    }
+  },
+  component: Video
+};
+
+const Template: Story<VideoProps> = args => <Video {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  caption: 'Video caption',
+  poster: 'images/poster.png',
+  src: 'videos/video.mp4',
+  type: 'file'
+};
+
+export const Youtube = Template.bind({});
+Youtube.args = {
+  caption: 'Video caption',
+  poster: 'images/poster.png',
+  id: 'qxrmosy1jCY',
+  type: 'youtube'
+};
+
+export const Vimeo = Template.bind({});
+Vimeo.args = {
+  caption: 'Video caption',
+  poster: 'images/poster.png',
+  id: '124813126',
+  type: 'vimeo'
+};
diff --git a/src/components/Video/Video.style.tsx b/src/components/Video/Video.style.tsx
new file mode 100644
index 0000000..4928d59
--- /dev/null
+++ b/src/components/Video/Video.style.tsx
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const StyledVideo = styled.div`
+  width: 100%;
+  position: relative;
+
+  .video__overlay {
+    position: relative;
+    width: 100%;
+
+    button {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+`;
+
+export default StyledVideo;
diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx
new file mode 100644
index 0000000..b8a4065
--- /dev/null
+++ b/src/components/Video/Video.tsx
@@ -0,0 +1,75 @@
+/* eslint-disable jsx-a11y/media-has-caption */
+import React, { useState } from 'react';
+
+import Text from '../Text';
+import Button from '../Button';
+import AspectRatio from '../AspectRatio';
+
+import StyledVideo from './Video.style';
+
+export type VideoProps = {
+  type?: 'file' | 'youtube' | 'vimeo';
+  src?: string;
+  caption?: string;
+  id?: string;
+  poster?: string;
+};
+
+const Video = ({ caption, src, id, poster, type }: VideoProps) => {
+  const hasPoster = typeof poster !== 'undefined';
+  const [playing, setPlaying] = useState(!hasPoster);
+
+  return (
+    <StyledVideo>
+      {!playing && poster && (
+        <div className="video__overlay">
+          <AspectRatio ratio="16:9">
+            <img src={poster} alt={caption} />
+          </AspectRatio>
+
+          <Button label="Play" icon="Play" iconPosition="only" onClick={() => setPlaying(true)} />
+        </div>
+      )}
+
+      {playing && (
+        <AspectRatio ratio="16:9">
+          {type === 'file' && <video src={src} controls />}
+
+          {type === 'youtube' && (
+            <iframe
+              className="video__iframe"
+              title="Youtube Video"
+              src={`https://www.youtube.com/embed/${id}?rel=0&autoplay=${hasPoster ? 1 : 0}`}
+              allowFullScreen
+              frameBorder="0"
+            />
+          )}
+
+          {type === 'vimeo' && (
+            <iframe
+              className="video__iframe"
+              title="Vimeo Video"
+              src={`https://player.vimeo.com/video/${id}?autoplay=${
+                hasPoster ? 1 : 0
+              }&title=0&byline=0&portrait=0`}
+              allowFullScreen
+              frameBorder="0"
+            />
+          )}
+        </AspectRatio>
+      )}
+
+      {caption && <Text>{caption}</Text>}
+    </StyledVideo>
+  );
+};
+
+Video.defaultProps = {
+  type: 'file',
+  caption: undefined,
+  poster: undefined,
+  src: undefined,
+  id: undefined
+};
+
+export default Video;
diff --git a/src/components/Video/docs.mdx b/src/components/Video/docs.mdx
index 125a379..d88c075 100644
--- a/src/components/Video/docs.mdx
+++ b/src/components/Video/docs.mdx
@@ -12,6 +12,8 @@ Die Komponente **wird verwendet**, um:
 
 <Canvas>
   <Story id="components-content-video--default" />
+  <Story id="components-content-video--youtube" />
+  <Story id="components-content-video--vimeo" />
 </Canvas>
 
 ## Anatomie