afeiship / react-full-video

Full page background video for react.

react-full-video

Full page background video for react.

installation

npm install -S @jswork/react-full-video

videos

• https://lofter.lf127.net/1611802866186/JWmeidangyeshenrenjingtayufangjiankuishixingchen.mp4
• https://lofter.lf127.net/1611821341381/jwhaideyanjing~1.mp4

usage

1. import css

@import "~@jswork/react-full-video/dist/style.css";

// or use sass
@import "~@jswork/react-full-video/dist/style.scss";

// customize your styles:
$react-full-video-options: ()

2. import js

import React from 'react';
import ReactFullVideo from '@jswork/react-full-video';
import '../../src/components/style.scss';
import styled from 'styled-components';

const Container = styled.div`
  padding: 0;
  margin: 0;
  height: 100%;
  .card {
    position: absolute;
    width: 400px;
    height: 220px;
    background: #fff;
    padding: 20px;
    box-shadow: rgb(0 0 0 / 16%) 0px 3px 10px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
`;

export default (props: any) => {
  return (
    <Container>
      <ReactFullVideo />
      <div className="card">A nice login ui.</div>
    </Container>
  );
};

preview

• https://afeiship.github.io/react-full-video/

license

Code released under the MIT license.