How to display the CPF in several different places every X seconds on the video screen using HTML5?

Well here we go, I found your question very different, and so far I have not understood how useful it is to be passing the CPF in front of some video, anyway the process is simple and follows what colleagues have already said in the comments.

Here's my simple code (think of a version 0.0.0.1) , as you did not specify if you were using some Framework as JQuery did with pure JavaScript, but adapting to another is not difficult, on the contrary .

CSS
Well as colleagues have indicated you should split your elements into two layers, in my case assign an ID to the < video > and said that it is below (z-index: -1) of all elements next to it assigns another ID in the < div > which contains the text of the CPF is above (z-index: 3;) besides saying that it has an absolute position on the screen or it is not stuck to the elements that are around it, rest is firula as color, background and borders, I put this to visualize the element to move on the screen.

<style>
#seuVideo { z-index -1px; border: 1px solid #000000; }
#seuCPF { width: 150px; height: 20px; z-index: 3; position: absolute; top: 0; left: 0; color: #FFFFFF; background-color: #FF0000; }
</style>

HTML
HTML is the simplest part of the code I've merged HTML5 tags in the case of video with HTML4 tags like div, line break and central allying, plus css inline (to hide text and only show in , I was too lazy to create everything cute because for our example anyway, I tried to centralize the video, because within JavaScript there is a "play" to know if locate within HTML so I did it on purpose.

<br><br>
<center>
 <video width="320" height="240" id="seuVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
 </video>
 <div id="seuCPF" style="display: none;">XXX.XXXX.XX-XX</div>
</center> 

JavaScript
Now we come to the soul of the whole thing, JavaScript, well we have 3 processes in JavaScript which I describe in more detail below:

• Whether the video is 'playing' or not
• Calculate the position of the video and the size of the text
• Loop random text positions

So I'll try to explain better within the code itself:

<script>
// Define o tempo para cada aparição do texto (no caso meio segundo)
var seg = 500;
// Faz a leitura de todas as propriedades do elemento <video> 
var video = document.getElementById("seuVideo");
// Faz a leitura de todas as propriedades do elemento <div> 
var texto = document.getElementById("seuCPF");
// Variável usada para controle do "loop"
var time = null;

// Função que pega a posição (X/Y) de qualquer elemento na tela
// Bastando informar seu respectivo ID
function Posicao(elemento) {
 var xP = 0;
 var yP = 0;

 while (elemento) {
  xP += (elemento.offsetLeft - elemento.scrollLeft + elemento.clientLeft);
  yP += (elemento.offsetTop - elemento.scrollTop + elemento.clientTop);
  elemento =elemento.offsetParent;
 }

 return { x: xP, y: yP };
}

// Função que gera um número aleatório entre um intervalo
function PosicaoAleatoria(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Função que sorteia número aleatórios de acordo com o tempo definido
// Além de posicionar o texto nessa posição  
function RandTexto(wMin, wMax, hMin, hMax) {
 var rX = PosicaoAleatoria(wMin, wMax);
 var rY = PosicaoAleatoria(hMin, hMax);

 texto.style.left = (rX + "px");
 texto.style.top = (rY + "px");

 time = window.setTimeout("javascript:RandTexto(" + wMin + "," + wMax + "," + hMin + "," + hMax + ");", seg);
}

// "Ouve" se o video está sendo executado
video.addEventListener("play", function(e) { 
 // Pega a posição da "caixa do vídeo" na tela
 var videoPos = Posicao(video);

 // Captura o tamanho do vídeo
 var vWidth = video.videoWidth;
 var vHeight = video.videoHeight;

 // Pega o tamanho da caixa de texto
 texto.style.display = "";
 var tWidth = texto.clientWidth;
 var tHeight = texto.clientHeight;

 // Calcula o local onde é possível apresentar o texto
 var rWidth = ((videoPos.x + vWidth) - tWidth);
 var rHeight = ((videoPos.y + vHeight) - tHeight);

 // Inicia o "loop" para criar o piscar o pisca
 RandTexto(videoPos.x, rWidth, videoPos.y, rHeight);
});

// "Ouve" se o vídeo foi pausado e limpa os eventos
video.addEventListener("pause", function(e) {
 window.clearInterval(time);
 texto.style.display = "none";
});
</script>

Just save as "video.html" and open to test, I tested using Chorme, Firefox and IE and at least for me it worked correctly.