Question

我目前正在尝试添加包含更多内容的全屏幕背景视频。我现在的问题是，我知道如何在视频后添加内容的唯一方法是增加＆＃34; top＆＃34; css，由于视频下方的内容与特定大小的视频重叠，因此不具备可扩展性。

您将如何解决此问题？

我建立反应，这是当前的代码;

Index.js

import React, { Component } from 'react';
import Nav from './Nav';
import Video from './custom_components/Video';

const styles = {
  content: {
    position: 'absolute',
    top: '100%',
    zIndex: '2',
    margin: '0 auto',
    maxWidth: '720px',
    textAlign: 'center',
  }
}

class Index extends Component {
  render() {
    return(
      <div style={{height: '100%',}}>
        <Nav />
        <Video />
        <div style={styles.content}>
          <h1>hello world</h1>
        </div>
      </div>
    );
  }
}

export default Index;

的Video.js

import React, {Component} from 'react';

const styles = {
  video: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    zIndex: '1',
    minWidth: '100%',
    minHeight: '100%',
    transform: 'translate(-50%, -50%)',
  },

}

class Video extends Component {
  render() {
    return(
        <video style={styles.video} autoPlay muted loop>
          <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4" />
        </video>
    );
  }
}

export default Video;

使用完整背景视频和内容进行设计

0 个答案: