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