Agregar un video de fondo en React JS

  2. HowTo
  3. React Howtos
  4. Agregar un video de fondo en React JS
MD Aminul Islam 15 febrero 2024
React React Background
Agregar un video de fondo en React JS

Proporcionar un fondo de video es una forma muy efectiva de atraer a los usuarios. Implementar un fondo de video usando React es muy fácil.

Este artículo nos mostrará cómo podemos crear un fondo de video en nuestra aplicación React JS, y discutiremos cada paso usando ejemplos y explicaciones para facilitar el tema. Antes de comenzar, una cosa importante acerca de los fondos de video es que los fondos de video con muchos gráficos pueden afectar el rendimiento de su aplicación, ya que no todos los dispositivos contienen la configuración alta.

Agregar un video de fondo en React JS

Aquí discutiremos los pasos para incluir un fondo de video en una aplicación React JS.

Para incluir un fondo de video, siga los tres pasos a continuación.

  • En primer lugar, vamos a organizar nuestro archivo index.html como se muestra a continuación:

    Código HTML (index.html):

    <!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf-8" />
	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="theme-color" content="#000000" />
	<meta
	  name="description"
	  content="Web site created using create-react-app"
	/>
	<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
	<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
	<title>React App</title>
  </head>
  <body>
	<div id="root"></div>
  </body>
</html>

    Recuerde, la mayor parte de la organización de esta parte la realizará automáticamente el sistema. Pero puedes modificarlos según tus necesidades.

  • Trabajaremos sobre el archivo JS principal, el App.js. Echa un vistazo al código en este archivo:

    Código JS (App.js):

    import './App.css';

import video from './video.mp4';

function App() {
  return (<div><video autoPlay loop muted>
          <source src = {video} type = 'video/mp4' />
          </video>
		<div className='content'>
		  <h1>This is a text</h1>
          </div>
	</div>);
}

export default App;

    En el ejemplo anterior, creamos dos elementos secundarios dentro de un contenedor div. El primer elemento es un video que funcionará como fondo; otro contiene algo de texto.

  • Ahora es el momento de incluir algo de CSS en nuestra aplicación React JS. Aplicamos los siguientes estilos en nuestra aplicación React JS.

    Código CSS (App.css):

    video {
  width: 100%;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

Ahora, después de haber realizado todos los pasos a la perfección, obtendrá el siguiente resultado en su navegador:

Fondo de React Video - Salida

Los códigos de ejemplo compartidos en este artículo están escritos en el proyecto React JS. Su sistema debe tener la última versión de Node JS para ejecutar un proyecto React, por lo que si su sistema no contiene Node JS, instálelo primero.

Autor: MD Aminul Islam
MD Aminul Islam avatar MD Aminul Islam avatar

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

LinkedIn