'I want to add a floating text on a video in case of full screen

I added a text on a video in normal case and it works fine but in full screen case the text disappeared i tried :

<div class="homepage-video">
'.$OUTPUT->box($content, "generalbox center clearfix").'
<div class="text-over-video">
  <h1>id: '.$USER->id.'</h1>
</div>
</div>

the style :

<style>
.homepage-video, .homepage-video video {
    position: relative;
  }
  .homepage-video video {
      background-size: cover !important;
      background-repeat: no-repeat !important;
      background-position: 50% !important;
  }
  
  .text-over-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    z-index: 1;
  }
</style>

any ideas to appear this text also in full screen

javascripthtmljquerycss


Solution 1:[1]

You should try to look here, and use a video tag. Otherwise I think it will be complicated to add text on fullscreen..

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Menethil

Related Questions