I am trying to overlay a watermark on a HTML5 video, and depending on the user selection, set the position of the watermark on the 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>
    );
};

With the current styles, the watermark is positioned at the top-left of the video. I want to allow the user to select the position.

Currently, my approach is to create a css class selector for each position like below and use useState hook to set the class based on user selection.

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>
    );
};

But this is definitely not ideal due to the repeated code within the CSS file. Would like to know if there is way to set the properties (in this case, top, bottom, left, right) dynamically so that I only need a single class selector.