配置時のテキストの位置を制御

Question

私は全幅のビデオをしようとしていますfollowingコードです。私はそれが反応するように高さを与えることによってビデオを制限したくないのですが、私が小さな画面でそれを見ると、その上に置かれたコンテンツまたは上が押し下げられています。モバイル 画面が小さく、その下のテキストやパネルがビデオの背後に隠れる、またはビデオの非表示/重なっている場合でも、ビデオ上のテキストが同じ位置に表示されるようにするにはどうすればよいですか。

私は動画の上にテキストを作って、まともなもので飛び跳ねたり隠れたりしないようにします。私は間違った位置を使っていますか？

.centered{ 
    position: relative; 
    top:50%; 
    z-index: 1; 
    color:#fff; 
    text-shadow:1px 1px 10px #000; 
} 
video{ 
    background-size:cover; 
    width: 100%; 
    position: absolute; 
    top:0; 
} 

Answer 1

を中央にテキストを配置するカルク機能を使用 ビデオ。これは、ビデオのアスペクト比を取得し、ビデオのアスペクト比のスペースを作成するパディング（56.2％）を作成して（iframe section hereのテクニックを使用して）テキストをその親要素に置き、position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);テキストを動画の中央に配置します。私はこのlinkが何かを中心にについてあなたを助けになると思い

* {margin:0;padding:0;} 
 

 
#video { 
 
    height: 0; 
 
    padding-top: 56.2%; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
#video video { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -100; 
 
    -ms-transform: translateX(-50%) translateY(-50%); 
 
    -moz-transform: translateX(-50%) translateY(-50%); 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
    background: url(polina.jpg) no-repeat; 
 
    background-size: cover; 
 
} 
 

 
#video h1 { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    color: #fff; 
 
    text-shadow: 1px 1px 10px #000; 
 
    font-size: 36px; 
 
    font-family: sans-serif; 
 
    text-align: center; 
 
}

<div id="video"> 
 
    <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop=""> 
 
    <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm"> 
 
    <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4"> 
 
    </video> 
 
    <h1>We Evolve with our students 
 
</div>

Answer 2

絶対的な要素内にイントロテキストを配置するのは多分ですか？ここで

http://codepen.io/anon/pen/NdpyVX

<section class="vid"> 
<video controls poster="http://www.webestools.com/page/media/videoTag/BigBuckBunny.png"> 
    <source src="http://www.webestools.com/page/media/videoTag/BigBuckBunny.mp4" type="video/mp4"> 
    <source src="http://www.webestools.com/page/media/videoTag/BigBuckBunny.ogg" type="video/ogg"> 
    <source src="http://www.webestools.com/page/media/videoTag/BigBuckBunny.webm" type="video/webm"> 
    Your browser does not support the video tag or the file format of this video. <a href="http://www.webestools.com/">http://www.webestools.com/</a> 
</video> 

<div class="intro"> 
    This is something cool for kids who want to watch videos 
</div> 
</section> 

Answer 3

centerredクラスを持つdiv要素のCSSです。これがあなたを助けることを願っています。 絶対に位置を変更し、親要素がposition: relative;を持っており、映像が含まれており、親がに応じて調整していることを確認してくださいトップ

から

.centered 
{ 
position: absolute; 
top: calc(100% - 50%); 
text-align : center; 
left : 0; 
right : 0; 
z-index: 1; 
color:#fff; 
text-shadow:1px 1px 10px #000; 
} 

Answer 4

;） 位置決めテキストについて、あなたはvh値を使用することができます。つまり

.text { 
    position: absolute; 
    top: 30vh 
} 

また、this guy from the top絶対位置についての好例を有する。）

Link約vh