背景ビデオにテキストをオーバーレイする方法は？

divタグを使用してウェブサイトに異なる動画を使用しようとしていますが、表示するテキストをオーバーレイしたいと考えています。しかし、私が何かをしてdivの背景として別のビデオを使用するときは、それは完全に1つのビデオだけを表示します<html>もう1つではありません。
私のコードは以下の通りです。背景ビデオにテキストをオーバーレイする方法は？

<div class="video-overlay"></div> 

<video class="sqs-html5-video" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster.jpg" autoplay loop><source src="vid/1.mp4" type="video/mp4"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster-old-ie.jpg" class="ie8-poster"</video><div class="text-copy"><h1>Fullscreen Video w/overlay</h1></div>

私は別の背景ビデオを置くと表示されません。最初のビデオのみが表示されます。

出典

2016-10-23 Maulik

あなたは単にそのためにCSSを使うことができます。第一のビデオの後

.video-overlay{ 
 
position:absolute; 
 
    z-index:9999999999; 
 
}

<div class="video-overlay">Any Text</div> 
 

 
<video class="sqs-html5-video" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster.jpg" autoplay loop><source src="vid/1.mp4" type="video/mp4"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster-old-ie.jpg" class="ie8-poster"</video><div class="text-copy"><h1>Fullscreen Video w/overlay</h1></div>

出典

2016-10-23 14:57:39

OK、私は別の背景ビデオを追加します何をすべきか？ – Maulik

あなたはより明確にする必要があります。別のビデオをどこに追加しますか？最初のベロー？最初のものが終了した後...私たちはそれに答えるあなたの質問を更新してください。 –

.container { position:relative; } 
 
.container video { 
 
    position:relative; 
 
    z-index:0; 
 
} 
 
.overlay { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    z-index:1; 
 
}

<div class="container"> 
 
    <video id="video" width="770" height="882" onclick="play();"> 
 
     <source src="video/Motion.mp4" type="video/mp4" /> 
 
    </video> 
 
    <div class="overlay"> 
 
     <p>Content above your video</p> 
 
     <form> 
 
      <p>Content Below Your Video</p> 
 
      <label for="input">Form Input Label</label> 
 
      <input id="input" name="input" value="" /> 
 
      <button type="submit">Submit</button> 
 
     </form> 
 
    </div> 
 
</div>

または

<video loop autoplay muted poster="path/to/screenshot.jpg"> 
    <source src="path/to/video.webm" type="video/webm"> 
    <source src="path/to/video.ogg" type="video/ogg"> 
    <source src="path/to/video.mp4" type="video/mp4"> 
</video>

出典

2016-10-23 14:59:40

背景ビデオにテキストをオーバーレイする方法は？

答えて

関連する問題