CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tee Famakin
Tee Famakin

Reputation: 158

How to implement an overlay over a video tag

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 enter image description here

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

Upvotes: 0

Views: 2303

Answers (2)

swapnil solanke
swapnil solanke

Reputation: 258

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() });

Upvotes: 0

duukn
duukn

Reputation: 275

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;

Upvotes: 1

Related Questions