Crear un script js, el cual teniendo un div de id: "captcha", y un video de fondo (osea que el div captcha se sobrepone sobre el video), con id: videocpatcha, coloque una img en cualquier lugar random del div, sin importar el tamaño del div. La imagen sera: https://icons.iconarchive.com/icons/iconsmind/outline/72/Play-Music-icon.png, el cual tiene un tamaño de 72x72 pixeles.
Aquí te dejo un ejemplo básico de cómo podrías hacerlo en JavaScript puro:
<div id="captcha"></div>
<video id="videocaptcha">
<source src="tu_video.mp4" type="video/mp4">
</video>window.onload = function() {
// carga la imagen
const img = new Image();
img.src = 'https://icons.iconarchive.com/icons/iconsmind/outline/72/Play-Music-icon.png';
img.width = 72;
img.height = 72;
img.style.position = 'absolute';
const captcha = document.getElementById('captcha');
captcha.appendChild(img);
// elegir una posición aleatoria dentro del div del captcha
img.style.left = Math.random() * (captcha.offsetWidth - img.width) + 'px';
img.style.top = Math.random() * (captcha.offsetHeight - img.height) + 'px';
// si se hace click en la imagen, retirar el captcha y reproduce el video
img.onclick = function() {
captcha.style.display = 'none';
const video = document.getElementById('videocaptcha');
video.play();
}
}
<style>
#container {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
<div id="container">
</div>
<script>
function getRandomColorValue() {
return Math.floor(Math.random() * 256);
}
function getRandomColor() {
var r = getRandomColorValue();
var g = getRandomColorValue();
var b = getRandomColorValue();
return "rgb(" + r + "," + g + "," + b + ")";
}
function captchaClick() {
alert("Clicked on the captcha");
}
document.addEventListener("DOMContentLoaded", function() {
var randomDiv = document.createElement("div");
randomDiv.style.width = "10px";
randomDiv.style.height = "10px";
randomDiv.style.backgroundColor = getRandomColor();
randomDiv.style.position = "absolute";
randomDiv.style.top = Math.floor(Math.random() * 191) + "px";
randomDiv.style.left = Math.floor(Math.random() * 191) + "px";
randomDiv.setAttribute("onclick", "captchaClick()");
document.getElementById("container").appendChild(randomDiv);
});
</script>
