Add video background pattern

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',
 }
 

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>
 

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>
     );
 };

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;

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;

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%',

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%',
             }}

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>