Reposition watermark on video at different positions every minute without plugin

Question

I want to change the position of the watermark on the video after every minute, like on the top right, after a minute on the left top, etc. Such random positions while on going video. I have added watermark by CSS and jquery.

JQUERY PART-

var email = "testing"; // email varibale was set in one of php file.
var content = '<style>.parent-video:before{content: "'+email+'";}</style>';
$('head').append(content);

CSS PART-

.parent-video::before {  //this is div, parent of video element
    position: absolute;
    opacity: 0.8;
    background: #fff;
    color: #414040;
    font-size: 10px;
    top: 5px;
    right: 10px;
    max-width: 16%;
    word-wrap: break-word;
    max-height: 75%;
}
.parent-video .child-video { // .child-video is video element
    position: unset !important;
}

Answer 1

CSS

A simple method could be using a CSS animation with duration of 240s. Positions are not random, but it's an easy way to do it:

.parent-video::before {
    position: absolute;
    opacity: 0.8;
    background: #fff;
    color: #414040;
    font-size: 80px;
    max-width: 16%;
    word-wrap: break-word;
    max-height: 75%;
    animation: watermark infinite 240s;
}



@keyframes watermark {
        0% {
            bottom: unset;
            top: 5px;
            right: 10px;
            left: unset;
        }
        25% {
            top: unset;
            bottom: 5px;
            left: 10px;
            right: unset;
        }
        50% {
            bottom: unset;
            top: 5px;
            left: 10px;
            right: unset;
        }
        75% {
            top: unset;
            bottom: 5px;
            right: 10px;
            left: unset;
        }
    }

JQuery

Alternativly, you can use JQuery and make it random. First of all, you have to create 4 CSS classes (4 positions) because JQuery cannot access pseudoclass's style directly.

So, this is the CSS:

.parent-video.watermark-top::before {
    bottom: unset;
    top: 5px;
}

.parent-video.watermark-bottom::before {
    bottom: 5px;
    top: unset;
}

.parent-video.watermark-left::before {
    left: 10px;
    right: unset;
}

.parent-video.watermark-right::before {
    left: unset;
    right: 10px;
}

The script will run forever every 60 seconds. There is a 50% chance that the watermark is aligned top or bottom and 50% that it is aligned left or right.

function move() {

    var element = $('.parent-video');
    if (Math.random() > 0.5) //align left
        element.addClass("watermark-left").removeClass("watermark-right");
    else //align right
        element.addClass("watermark-right").removeClass("watermark-left");

    if (Math.random() > 0.5) //align top
        element.addClass("watermark-top").removeClass("watermark-bottom");
    else //align right
        element.addClass("watermark-bottom").removeClass("watermark-top");


}



window.setInterval(move, 60000); //invoke!

To stop infinite loop use clearInterval().

Being random, it implicitly allow your watermark to maintain the same position for many times.