JSFiddle - React, Tailwind, and code Playground

by ilyabezp

HTML

<div id="video" style="position: relative; height: 400px; min-height: 400px; width: 533px;">
<video src="http://www.w3schools.com/html/movie.mp4" style="position:absolute;min-height:400px;height:400px;" id="partner"></video>
    <img src="http://localhost/watermark.png" style="position: absolute; z-index: 1; padding: 15px; right: 0px; display: inline-block; opacity: 0.4;" id="watermark">
<video src="http://www.w3schools.com/html/movie.mp4" onmousemove="myFunction(this)" style="position:absolute;z-index:2;height:90px;max-height:90px;padding:10px;" id="me"></video>
</div>

JavaScript

document.getElementById('partner').onloadedmetadata = function(){
document.getElementById('watermark').style.display = 'inline-block';
document.getElementById('video').style.width = Math.round(400*document.getElementById('partner').videoWidth/document.getElementById('partner').videoHeight)+'px';
}
myFunction = function(a){
//alert(a.parentNode.offsetLeft);alert(a.parentNode.offsetTop);
alert(positionX);
//a.style.left = a.offsetLeft+'px';//+parseInt(document.getElementById('me').style.paddingLeft)
}
document.onmousemove = function(e){
positionX = e.pageX||e.clientX;
};