javascript - 在 html5 中文本以视频为中心

Question

我的容器 div 包含一个视频和一个包含一些文本的 div。

我希望文本位于视频上方并位于中心位置，当我调整浏览器窗口大小时也是如此。

我意识到这个demo ，但我认为这只是一个起点。我该如何改进我的代码？

这是代码。

/**CSS**/

video {
  position:relative;
  z-index:-1;
}

#custom-message {
  position:relative;
  color: rgb(230, 200, 98);
  z-index:1;
  top: -200px;       
}

<!--**HTML**-->

<div id="container" align="center">
  <video width="640" height="320" autoplay>
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/>
  </video>
  <div id="custom-message">CENTERED TEXT ABOVE</div>
</div>

Answer 1

请看这里的片段: DEMO

var $vid = $('video','#container');
var $msg = $('#custom-message'); 
$msg.css({
    top:$vid.offset().top + (($vid.height()/2) - ($msg.height()/2)),
    left:$vid.offset().left + (($vid.width()/2) - ($msg.width()/2))
});​