How to implement an overlay over a video tag

Question

Hello i have a slider which allows for images and videos,

i am tryin to fix an overlay over my video on the slider but when ever i try it the video stops playing and acts like an image with the overlay present on it link to my page where slider exists

http://whitechapelandpartners.com/flex/

screenshot of the slide

and this what i am trying that has given me this result credit : http://codepen.io/icutpeople/pen/whueK

 .video-container {
  position: relative;
}
video {
  height: auto;
  vertical-align: middle;
  width: 100%;
}


.overlay-desc {
  background: rgba(255, 0, 0, 0.37);
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

 <?php if($type == 'video'){?>
  <div class="video-container">
    <video  width="320" height="240" controls>
  <source src="<?php echo $row_slide['path']; ?>" type="video/mp4">

Your browser does not support the video tag.

</video> 
<div class="overlay-desc">
        <h1>Waynes World</h1>
     </div>

    </div>

      <?php }?>

any help to why my video stops playing

why you are not having the `autoplay` attribute in your video tag, it is there in the example that you have provided. — vikscool, Apr 12 '17 at 09:00
even after the auto play it still shws like an image but i can here the sound of the video — Tee Famakin, Apr 12 '17 at 09:08
@solanke zindex wat, and did u try it before typing this pls — Tee Famakin, Apr 12 '17 at 09:14
to overlay-desc selector, Give z-index:99; i hope it'll work. — swapnil solanke, Apr 12 '17 at 09:15
try using this `$('video').get(0).play()` to play the video and explanation is given here http://stackoverflow.com/a/26907606/2417602 — vikscool, Apr 12 '17 at 09:17
can u gv me an implementation @vikscool am unable to get it to work, besides you can inspect the element on my page to try wat ure teachin me to use thanks — Tee Famakin, Apr 12 '17 at 09:31
i have also noticed that it works in a pure html file, but dosent work in the boostrap file — Tee Famakin, Apr 12 '17 at 09:32
put $('video').get(0).play(); this after your JQyery library load. because of that it's throwing error now — swapnil solanke, Apr 12 '17 at 09:46
i have placed this after my jquery at the footer, still the same — Tee Famakin, Apr 12 '17 at 09:50
in your browser code why autoplay attribute is missing form video tag? — swapnil solanke, Apr 12 '17 at 09:56
$( window ).load(function() { $('video').get(0).play() }); try this. — swapnil solanke, Apr 12 '17 at 09:58
nice it works @solanke please make ur suggestion an answer so i can mark it as the right answer — Tee Famakin, Apr 12 '17 at 10:01

score 1 · Answer 1 · answered Apr 12 '17 at 09:37

1

Posting as an answer because I can't add a comment yet.

z-index : # //any number

This determines the positioning of an element on, well it's z-line. Think of it as a graph in algebra where 'x' will be the position left and right, 'y' will be the position up and down, and 'z' is the how much above or below and element will appear.

The default z-index is set to auto, which means it takes the z-index of it's parent. If you want to place something above it then just set the z-index to greater than the parent. You can try this very easy in the developers tools and just keep increasing the z-index until whatever you want is on top.

Or you can just go :

z-index: 9999999;

answered Apr 12 '17 at 09:37

duukn

265
2
10

cuz iv tested it and its still the same – Tee Famakin Apr 12 '17 at 09:43
Yeah it is not working just by setting the z-index. Looking at the html I noticed that the
does not even go over the video player so any changes you do in the overlay-desc will appear much higher. You need to go back and chek the html and make sure all the containers work as intended.
– duukn Apr 12 '17 at 09:55

score 0 · Accepted Answer · answered Apr 12 '17 at 10:08

First and proper way to solve it by using attribute autoplay in your video tag just like following exmaple

<video width="320" height="240" controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Or either make it forcefully play using jquery/javascript method as follows.

$( window ).load(function() { $('video').get(0).play() });

How to implement an overlay over a video tag

2 Answers2