Question

我有几种视频，比如

<video id='abd' height="200" width="200" ></video>

<embed id='bcd' height="200" width="200" ></embed>

<object id='cde' height="200" width="200" ></object>

我已经像这样计算了目标位置

<script>
    var vid=document.getElementById('abd');
    var width =  vid.offsetWidth;
    var height =  vid.height; 
    var x = width/2+ 'px';
    var y = height - 12+'px';

    var div = '<div>Heloo</div>';
</script>

现在我想把div放在位置（x，y）。

我该怎么办？ div存储在var div中，有没有办法完美地完成这个任务，

你的帮助会很棒

由于

Answer 1

你可以使用纯CSS来做到这一点 - 不需要JS！

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>

CSS

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

查看实际操作

http://jsfiddle.net/y28Zs/

Answer 2

试试这个

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

Answer 3

请检查它是否符合您的要求：

<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);

现场演示：（http://jsfiddle.net/7EhtL/）

使用javascript将Div放在视频顶部

3 个答案: