Estoy tratando de superponer una marca de agua en un video HTML5 y, según la selección del usuario, establecer la posición de la marca de agua en el video.
CSS
/*Video.module.css*/ .wrapper { position: relative; height: 100%; } .wrapper::before { display: block; position: absolute; top: 2%; left: 2%; height: 18%; width: 18%; content: ''; background: 'red'; }JSX
import styles from 'styles/Video.module.css'; const Video = ({ src }) => { return ( <div class={styles.wrapper}> <video src={src}> <track type='captions' /> </video> </div> ); };Con los estilos actuales, la marca de agua se coloca en la parte superior izquierda del video. Quiero permitir que el usuario seleccione la posición.
Actualmente, mi enfoque es crear un selector de clase css para cada posición como se muestra a continuación y usar el enlace useState para configurar la clase según la selección del usuario.
CSS
.wrapper-top-right { position: relative; height: 100%; } .wrapper-top-right::before { top: 2% right: 2% .... } .wrapper-bottom-right { .... } .wrapper-bottom-right::before { bottom: 2%; right: 2%; .... }JSX
import styles from 'styles/Video.module.css'; import React, {useState} from 'react'; const Video = ({ src }) => { //Values: 'top-left', 'bottom-left', 'top-right', 'bottom-right' const [position, setPosition] = useState('top-left'); return ( <div class={`styles[${position}]`}> <video src={src}> <track type='captions' /> </video> /** Button with code to set position.... **/ </div> ); }; Pero esto definitivamente no es ideal debido al código repetido dentro del archivo CSS. Me gustaría saber si hay una forma de establecer las propiedades (en este caso, top, bottom, left, right ) dinámicamente para que solo necesite un selector de clase único.
Puede usar las propiedades personalizadas de CSS establecidas para el elemento anfitrión.
No hablo React, así que rápido POC vainilla:
.wrapper::before { position: absolute; top: var(--before-top, 0%); left: var(--before-left, 0%); background: red; color: white; content: var(--before-content, '?'); } .wrapper { position: relative; height: 100px; outline: #0FF6 solid; outline-offset: -2px; } label { display: block; } <label>Top: <input type="range" value="0" min="0" max="100" oninput="w.style.setProperty('--before-top', this.value + '%')"></label> <label>Left: <input type="range" value="0" min="0" max="100" oninput="w.style.setProperty('--before-left', this.value + '%')"></label> <label>Content: <input type="text" value="?" oninput="w.style.setProperty('--before-content', `'${this.value}'`)"></label> <div class="wrapper" id="w"></div>Establezca una --custom-property en el elemento principal. Cambiaré los valores con :pasar el cursor aquí, pero también debería poder ver cómo se podría hacer dentro de un atributo de style :
div { /* Important bits */ --watermarkBottom: 0; --watermarkTop: initial; /* Boilerplate */ width: 100px; height: 100px; background-color:red; position: relative; } div:hover { /* Important bits */ --watermarkBottom: initial; --watermarkTop: 0; } div::after { /* Important bits */ bottom: var(--watermarkBottom); top: var(--watermarkTop); /* Boilerplate */ content: 'watermark'; background-color:blue; color:white; position: absolute; } <div></div>