1

divビデオとテキストを含むコンテナがdivあります。

ブラウザウィンドウのサイズを変更するときも、テキストがビデオの上で中央の位置にあるようにしたいと思います。

私はこのデモに気づきましたが、それは出発点に過ぎないと思います。どうすればコードを改善できますか？

これがコードです。

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

こちらのスニペットをご覧ください： 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 に答える
3

さて、z-index: -1Firefoxで物事を台無しにします。これを使って：

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

ただし、これを行う最善の方法は JavaScript を使用することです。何があっても使用する必要があるz-indexため、ビデオ コンテナーを相対的に配置し、絶対的なカスタム メッセージをビデオ コンテナー内に配置し、JavaScript を使用してカスタム メッセージのleftとを計算しtopます。以下は生の JavaScript (ライブラリなし) のやり方です。

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

または、すでに jQuery を使用している場合。

$(function() {
    $('#customMessage').css({
        top: $('#video').height() / 2 - $('#customMessage').height() / 2,
        left: $('#video').width() / 2 - $('#customMessage').width() / 2
    });
});
于 2012-12-14T10:40:09.723 に答える
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 に答える