HTML - Как поместить текст в видеоплеер?

Question

Как я могу поместить текст или, скажем, я хочу поместить текст Logo в мой видеоплеер внутри него, как это?

Как мне этого добиться, пожалуйста, помогите, спасибо.

<video width="320" height="240" controls src="video/flashtrailer.mp4">
  Your browser does not support the video tag.
</video>

Answer 1

Вам нужно будет добавить контейнер div, а затем сделать video дочерним, а другой div родным братом video. Затем используйте относительное позиционирование на родителя и абсолютное на детей. Как это:

.container
{
    width: 320px;
    height: 240px;
    position: relative;
}
.container video
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 320px;
    height: 240px;
    z-index: 1 !important;
}
.container .overlay
{
    position: absolute;
    top: 0;
    left: 10px;
    width: 100%;
    z-index: 2;
}
.container .overlay h3
{
    font-size: 1em;
    color: #fff;
    font-weight: bold;
}

<div class="container">
    <video width="320" height="240" controls src="video/flashtrailer.mp4">
        Your browser does not support the video tag.
    </video>
    <div class="overlay">
        <h3>Logo</h3>
    </div>
</div>

Answer 2

Вот рабочий код: http://jsfiddle.net/kp81m9v6/3/

Вы положили video и img в упаковку div.

Затем вам нужно просто добавить позиции и указать z-индексы внутри оболочки, и все готово

HTML:

<div id="wrapper">
  <img src="https://brandmark.io/logo-rank/random/pepsi.png" width="50" height="50">
  <video width="320" height="240" controls src="video/flashtrailer.mp4">
    Your browser does not support the video tag.
  </video>
</div>

CSS:

#wrapper{
  position: relative
}
#wrapper video{
  position: relative;
  z-index: 100;
}
#wrapper img{
  position: absolute;
  display: block;
  z-index: 150;
  left: 10px;
  top: 10px;
}

#wrapper{
  position: relative
}
#wrapper video{
  position: relative;
  z-index: 100;
}
#wrapper img{
  position: absolute;
  display: block;
  z-index: 150;
  left: 10px;
  top: 10px;
}

<div id="wrapper">
  <img src="https://brandmark.io/logo-rank/random/pepsi.png" width="50" height="50">
  <video width="320" height="240" controls src="video/flashtrailer.mp4">
    Your browser does not support the video tag.
  </video>
</div>