-1

How can I put a text or lets say i want to put a text Logo in my video player inside of it like this?

enter image description here

how can i achieve that please help thanks.

<video width="320" height="240" controls src="video/flashtrailer.mp4">
  Your browser does not support the video tag.
</video>
  • 2
    Possible duplicate of [Image over a video (html5)](https://stackoverflow.com/questions/5802183/image-over-a-video-html5) – esqew Jan 18 '19 at 03:00

2 Answers2

1

Here is the working code: http://jsfiddle.net/kp81m9v6/3/

You put your video and your img in a wrapper div.

Then you have to just add the positions and specify the z-indexes inside the wrapper and you are done

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>
Patrik Alexits
  • 987
  • 9
  • 24
1

You will need to add a container div and then make the video a child and another div a sibling of video. Then use relative positioning on parent and absolute on children. Like this:

.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>
  • 1
    hey sir thanks it is showing BUT when I click the full screen the logo is removed :( how can i show the logo even when i full screen the video –  Jan 18 '19 at 03:09
  • @obitouchiha I don't know, but it's been asked before here: [Overlay on HTML5 Fullscreen Video](https://stackoverflow.com/questions/16234740/overlay-on-html5-fullscreen-video) –  Jan 18 '19 at 03:11
  • it did not work sir :( the logo cannot be seen on fullscreen –  Jan 18 '19 at 03:19