CODEWITHSUNDEEP
javascriptjquerycsshtmlhtml5-video
Luca Davanzo
Luca Davanzo

Reputation: 21520

Text centered over video in html5

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>

Upvotes: 1

Views: 10815

Answers (3)

flavian
flavian

Reputation: 28511

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

Upvotes: 3

A. Wolff
A. Wolff

Reputation: 74420

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

Upvotes: 3

ashley
ashley

Reputation: 2767

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>​

Upvotes: 2

Related Questions