diff --git a/contents/_includes/patterns/video-background.njk b/contents/_includes/patterns/video-background.njk new file mode 100644 index 0000000..90c55eb --- /dev/null +++ b/contents/_includes/patterns/video-background.njk @@ -0,0 +1,8 @@ +
+
+ +
+
+ {% lines "hor", 5 %} +
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 2fdda7d..2ee1a00 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -175,6 +175,12 @@ eleventyExcludeFromCollections: true
Voting
+
+ +
{% include "patterns/video-background.njk" %}
+
Video background
+ +
diff --git a/contents/video-background.md b/contents/video-background.md new file mode 100644 index 0000000..57294c5 --- /dev/null +++ b/contents/video-background.md @@ -0,0 +1,78 @@ +--- +layout: layouts/post.njk +title: Video background +description: Add video background with CSS flexbox +keywords: css flexbox, object fit cover +--- + +In this pattern, the video is displayed in the background. + +## HTML + +```html +
+ +
+ +
+ + +
+ ... +
+
+``` + +## CSS + +```css +.video-background { + /* Used to position the video and content */ + position: relative; +} + +.video-background__inner { + /* 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-background__video { + object-fit: cover; + + /* Take full width */ + height: 100%; + max-width: 100%; +} + +.video-background__content { + /* 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; +} +``` + +{% demo %} +{% include "patterns/video-background.njk" %} +{% enddemo %} diff --git a/pages/video-background/index.tsx b/pages/video-background/index.tsx deleted file mode 100644 index 697e535..0000000 --- a/pages/video-background/index.tsx +++ /dev/null @@ -1,155 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { Spacer } from '@1milligram/design'; - -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import Block from '../../placeholders/Block'; -import BrowserFrame from '../../placeholders/BrowserFrame'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - -
- In this pattern, the video is displayed in the background. -
- - -
- -
- - -
- ... -
- -`} - css={` - .container { - /* Used to position the video and content */ - position: relative; - } - - .container__wrapper { - /* Positioned at the top left corner */ - left: 0px; - position: absolute; - top: 0px; - - /* Take full size */ - height: 100%; - width: 100%; - - /* Hide the scrollbar */ - overflow: hidden; - } - - .container__video { - object-fit: cover; - - /* Center the video */ - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - - /* Take full width */ - width: 100%; - } - - .container__content { - /* 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; - } - `} - > -
-
-
-
- -
-
- -
-
-
-
- - - - - ); -}; - -export default Details; diff --git a/patterns/video-background/Cover.tsx b/patterns/video-background/Cover.tsx deleted file mode 100644 index 259197f..0000000 --- a/patterns/video-background/Cover.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Line from '../../placeholders/Line'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
- -
-
- -
-
- -
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 74a9eb8..4cd38e1 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -36,6 +36,7 @@ @import './patterns/fixed-at-side'; @import './patterns/full-background'; @import './patterns/initial-avatar'; +@import './patterns/video-background'; @import './patterns/voting'; @import './patterns/watermark'; diff --git a/styles/patterns/_video-background.scss b/styles/patterns/_video-background.scss new file mode 100644 index 0000000..821a1a9 --- /dev/null +++ b/styles/patterns/_video-background.scss @@ -0,0 +1,46 @@ +.video-background { + /* Used to position the video and content */ + position: relative; + + height: 100%; + width: 100%; +} + +.video-background__inner { + /* 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-background__video { + object-fit: cover; + + /* Take full width */ + height: 100%; + max-width: 100%; +} + +.video-background__content { + /* 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; +} \ No newline at end of file