How to center a block on top of a video?

Question

css

Tell me , how can I center the #myblock block on top of the video?

<div id="trailer" class="is_overlay">
  <video id="video" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
    <source src="http://5thedgestudio.at.ua/img/back.mp4"></source>
  </video>

</div>
    <div id="myblock">
    Мои любые данные
    </div>

.is_overlay{ display: block; width: 100%; height: 100%; }
#trailer {position: fixed;top: 0; right: 0; bottom: 0; left: 0;overflow: hidden;;}
#trailer > video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index:-1000;}
@media (min-aspect-ratio: 16/9) {#trailer > video { height: 300%; top: -100%; }}
@media (max-aspect-ratio: 16/9) {#trailer > video { width: 300%; left: -100%; }}
/* Если есть поддержка object-fit (Chrome/Chrome для Android, Safari в iOS 8 и Opera), используем его: */
@supports (object-fit: cover) {#trailer > video {top: 0; left: 0;width: 100%; height: 100%;object-fit: cover;}}
#myblock {margin: 0 auto;width:1000px;z-index:9999;}

Now the #myblock block is not even displayed on top :(

Answer 1

jsfiddle.net/yurzui/h184Ly1b/

Answer 2

First we need to take it all into a single block, then raise the #myblock block with z-index give it position: relative and center the block with margin: 0 auto. Or just center the text.

Answer 3

not weak z-index:9999
Try this
html

<div>
    <div class="one"> <!-- картинка -->
        
    <div class="two">Твой текст</div>
    </div>
   
</div>

css

.one {
  
     background: #aaa;
     width: 200px;
    height: 200px;
}

.two {
    width: 100px;
    height: 100px;
    margin-left:50px;
    padding-top:50px;
    background: #ccc;
    text-align: center;
}