Place Div On Top Of Video Using Javascript

I have several kinds of videos, like this

Solution 1:

You can do this using pure CSS - no JS required!

The HTML

<div id="video-container">
    <iframe width="420" height="315" src="//www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen>   </iframe>
    <div class="video-overlay">
        Overay Content
    </div>
</div>

The CSS

#video-container {
    position:relative;
    width:420px;
}
.video-overlay {
    position:absolute;
    top:50px;
    right:50px;
    background:#000;
    color:#FFF;
}

See it in action

http://jsfiddle.net/y28Zs/

Solution 2:

try this

http://jsfiddle.net/miquelcamps/BJN8x/3/

html

<video id="embed" width="200" height="200" controls>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

javascript

var vid    = document.getElementById('embed');
var width  = vid.width;
var height = vid.height;
var x      = vid.offsetLeft;
var y      = vid.offsetTop;

var div    = '<div class="overlay" style="height:'+height+'px;width:'+width+'px;left:'+x+'px;top:'+y+'px;">Hello</div>';

document.body.innerHTML += div;

css

.overlay{
    position:absolute;
    background:red;
    z-index:99;
}

Solution 3:

Please check is it what you want :

<div id="adds">
<video id='abd' height="200" width="200" style="border:2px solid" ></video>
</div>

Javascript ----

vid=document.getElementById('abd');
addDiv =document.getElementById('adds');

var width =  vid.offsetWidth;
var height =  vid.height; 
var x = width/2+ 'px';
var y = height - 12+'px';


var newDiv = document.createElement("div");
newDiv.innerText = "Hello....";
newDiv.style.left = "102px";
newDiv.style.top = "108px";
newDiv.style.position = "absolute";
addDiv.appendChild(newDiv);

Live demo : (http://jsfiddle.net/7EhtL/)

Share