Quiero configurar un video diferente como fondo dependiendo de las condiciones climáticas, por ejemplo, mientras esté soleado, el video de fondo debe ser soleado, el clima nublado debe ser un video en la nube. ¿Cómo puedo hacer esto en reactjs. Todo el video que tengo en la carpeta de activos del proyecto.

Código js de la aplicación:

 import Clear from "./Weatherconditions/Clear"; import Sunny from "./Weatherconditions/Sunny"; import Cloudy from "./Weatherconditions/Cloudy"; import Snow from "./Weatherconditions/Snow"; import Rainy from "./Weatherconditions/Rainy"; return ( <div className="app" style={ placeInfo.condition?.toLowerCase() === "clear" ? {Clear}: placeInfo.condition?.toLowerCase() === "sunny"? {Sunny}: placeInfo.condition?.includes("cloudy")? {Cloudy }: placeInfo.condition?.toLowerCase().includes("rainy")? {Rainy}: placeInfo.condition?.toLowerCase().includes("snow")? {Snow}: {}}>

y uno de los códigos de la sección de importación:

para claro:

 import React from 'react'; import Videos from "../assets/clear.mp4"; const Clear = () => { return ( <div> <video autoPlay loop muted style={{ position: 'absolute', width: '100%', left: '50%', top: '50%', height: '100%', objectFit: 'cover', transform: 'translate(-50%, -50%)', zIndex: '-1' }}> <source src = {Videos} type="video/mp4"/> </video> </div> ) } export default Clear;

Por favor, ayúdame