diff --git a/README.md b/README.md
index 23c0a08..4b85acd 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ A collection of popular layouts and patterns made with CSS:
 * Good practices (coming soon)
 * Accessibility (coming soon)
 
-![CSS Layout](/public/images/screenshot.png)
+![CSS Layout](/public/assets/screenshot.png)
 
 ## Why
 
diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index 5d06f3e..a0df96b 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -66,6 +66,7 @@ enum Pattern {
     TogglePasswordVisibility = 'Toggle password visibility',
     UploadButton = 'Upload button',
     ValidationIcon = 'Validation icon',
+    VideoBackground = 'Video background',
     Wizard = 'Wizard',
 }
 
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index cc4fe83..8b6a175 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -158,6 +158,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Ribbon} />
                         <CoverCard pattern={Pattern.Separator} />
                         <CoverCard pattern={Pattern.Timeline} />
+                        <CoverCard pattern={Pattern.VideoBackground} />
                     </div>
                 </section>
 
diff --git a/client/patterns/overlay-play-button/Details.tsx b/client/patterns/overlay-play-button/Details.tsx
index 1539eae..9dad788 100644
--- a/client/patterns/overlay-play-button/Details.tsx
+++ b/client/patterns/overlay-play-button/Details.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
 import Triangle from '../../placeholders/Triangle';
@@ -91,6 +93,7 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
+            <RelatedPatterns patterns={[Pattern.VideoBackground]} />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/video-background/Cover.tsx b/client/patterns/video-background/Cover.tsx
new file mode 100644
index 0000000..6d3eb40
--- /dev/null
+++ b/client/patterns/video-background/Cover.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    backgroundColor: 'rgba(0, 0, 0, 0.25)',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div style={{ marginBottom: '4px', width: '80%' }}>
+                    <Line backgroundColor='#fff' />
+                </div>
+                <div style={{ marginBottom: '4px', width: '60%' }}>
+                    <Line backgroundColor='#fff' />
+                </div>
+                <div style={{ width: '40%' }}>
+                    <Line backgroundColor='#fff' />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/video-background/Details.tsx b/client/patterns/video-background/Details.tsx
new file mode 100644
index 0000000..aa080ed
--- /dev/null
+++ b/client/patterns/video-background/Details.tsx
@@ -0,0 +1,141 @@
+import React from 'react';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Video background">
+            <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    In this pattern, the video is displayed in the background.
+                </div>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    height: '100%',
+                                    position: 'relative',
+                                    width: '100%',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        height: '100%',
+                                        left: 0,
+                                        overflow: 'hidden',
+                                        position: 'absolute',
+                                        top: 0,
+                                        width: '100%',
+                                    }}
+                                >
+                                    <video
+                                        style={{
+                                            objectFit: 'cover',
+                                            width: '100%',
+                                        }}
+                                        autoPlay={true}
+                                        loop={true}
+                                        muted={true}
+                                        playsInline={true}
+                                        src="/assets/video-background-demo.mp4"
+                                    />
+                                </div>
+
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        height: '100%',
+                                        justifyContent: 'center',
+                                        left: 0,
+                                        position: 'absolute',
+                                        top: 0,
+                                        width: '100%',
+                                    }}
+                                >
+                                    <div style={{ width: '250px' }}>
+                                        <Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Used to position the video and content */
+    position: relative;
+">
+    <!-- The video container -->
+    <div style="
+        /* Positioned at the top left corner */
+        left: 0px;
+        position: absolute;
+        top: 0px;
+
+        /* Take full size */
+        height: 100%;
+        width: 100%;
+
+        /* Hide the scrollbar */
+        overflow: hidden;
+    ">
+        <video
+            style="
+                object-fit: cover;
+
+                /* Center the video */
+                left: 50%;
+                position: absolute;
+                top: 50%;
+                transform: translate(-50%, -50%);
+
+                /* Take full width */
+                width: 100%;
+            "
+            src="..."
+        >
+    </div>
+
+    <!-- The content -->
+    <div style="
+        /* Positioned at the top left corner */
+        left: 0px;
+        position: absolute;
+        top: 0px;
+
+        /* Take full size */
+        height: 100%;
+        width: 100%;
+
+        /* Center the content */
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    ">
+        ...
+    </div>
+</div>
+`}
+                />
+            </div>
+            <RelatedPatterns patterns={[Pattern.OverlayPlayButton]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/placeholders/Block.tsx b/client/placeholders/Block.tsx
index d153322..508a7af 100644
--- a/client/placeholders/Block.tsx
+++ b/client/placeholders/Block.tsx
@@ -3,12 +3,18 @@ import React from 'react';
 import random from '../helpers/random';
 
 interface BlockProps {
+    backgroundColor?: string;
     blockHeight?: number;
     justify?: string;
     numberOfBlocks?: number;
 }
 
-const Block: React.FC<BlockProps> = ({ justify = 'start', numberOfBlocks = 1, blockHeight = 4 }) => {
+const Block: React.FC<BlockProps> = ({
+    backgroundColor = 'rgba(0, 0, 0, 0.3)',
+    blockHeight = 4,
+    justify = 'start',
+    numberOfBlocks = 1,
+}) => {
     return (
         <div
             style={{
@@ -32,7 +38,7 @@ const Block: React.FC<BlockProps> = ({ justify = 'start', numberOfBlocks = 1, bl
                         >
                             <div
                                 style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    backgroundColor,
                                     borderRadius: '9999px',
                                     height: `${blockHeight}px`,
                                     width: '100%',
diff --git a/client/placeholders/Line.tsx b/client/placeholders/Line.tsx
index 5fc0323..e5d7fc7 100644
--- a/client/placeholders/Line.tsx
+++ b/client/placeholders/Line.tsx
@@ -1,10 +1,16 @@
 import React from 'react';
 
-const Line: React.FC<{}> = () => {
+interface LineProps {
+    backgroundColor?: string;
+}
+
+const Line: React.FC<LineProps> = ({
+    backgroundColor = 'rgba(0, 0, 0, 0.3)',
+}) => {
     return (
         <div
             style={{
-                backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                backgroundColor,
                 height: '1px',
                 width: '100%',
             }}
diff --git a/package.json b/package.json
index fad603a..094b0d4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "csslayout",
     "scripts": {
-        "copy": "rimraf dist && mkdir dist && cpx public/**/* dist",
+        "copy": "rimraf dist && mkdir dist && cpx 'public/**/*' dist",
         "dev": "npm run copy && webpack --mode development",
         "dev-server": "npm run copy && webpack-dev-server",
         "build": "npm run copy && webpack --mode production && npm run export",
diff --git a/public/images/screenshot.png b/public/assets/screenshot.png
similarity index 100%
rename from public/images/screenshot.png
rename to public/assets/screenshot.png
diff --git a/public/assets/video-background-demo.mp4 b/public/assets/video-background-demo.mp4
new file mode 100644
index 0000000..d566293
Binary files /dev/null and b/public/assets/video-background-demo.mp4 differ
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 645d53f..cba59a6 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -67,5 +67,6 @@
     <url><loc>https://csslayout.io/patterns/toggle-password-visibility</loc></url>
     <url><loc>https://csslayout.io/patterns/upload-button</loc></url>
     <url><loc>https://csslayout.io/patterns/validation-icon</loc></url>
+    <url><loc>https://csslayout.io/patterns/video-background</loc></url>
     <url><loc>https://csslayout.io/patterns/wizard</loc></url>
 </urlset>
\ No newline at end of file