1

I have my container div that contain a video and a div with some text.

I would like that the text is above the video and in the central position, also when I resize browser window.

I realize this demo, but I think is only a starting point.. how can I improve my code?

Here is the code.

/**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>

4

3 回答 3

3

Okay, z-index: -1 will screw things up in Firefox. Use this:

<div id="video-container">
// all the video stuff goes in here.
<a id="your-text"></a>
</div>

#video-container {
   text-align: center;
   height: 400px;//or whatever you want
   line-height:400px;//should be equal to the height
   position: ..
   z-index: 1;
}

#custom-message {
    position: relative;
    display: inline-block;
    height:..;
    width:..;
    z-index: 10;
}

Best way to do this is with JavaScript though. You need to use z-index no matter what, so position the video container relatively, the custom message absolute, but inside of the video container, and then simply use JavaScript to compute the left and top of the custom message. The bellow is the raw JavaScript(no library) way of doing things.

window.onload = funciton() {
    var video = document.getElementById('video-container');
    var customMessage = document.getElementById('custom-message');
    var customMessageTop = video.offsetHeight / 2 - customMessage.offsetHeight / 2;
    var customMessageLeft = video.offsetWidth / 2 - customMessage.offsetWidth  / 2;
    customMessage.style.left = customMessageLeft + 'px';
    customMessage.style.top = customMessageTop + 'px';
};

or if you are already using jQuery for your stuff.

$(function() {
    $('#customMessage').css({
        top: $('#video').height() / 2 - $('#customMessage').height() / 2,
        left: $('#video').width() / 2 - $('#customMessage').width() / 2
    });
});
于 2012-12-14T10:40:09.723 回答
3

See snippet here: 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))
});​
于 2012-12-14T10:45:14.663 回答
2

css:

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

#custom-message {
    position:relative;
    color: rgb(230, 200, 98);
    z-index:1;
    top: 0;
    text-align: center;    
}​

html:

<div id="container" align="center">
     <div id="custom-message">CENTERED TEXT ABOVE</div>

    <video width="640" height="320" autoplay>
      <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/>
    </video>
</div>​
于 2012-12-14T10:42:30.130 回答