HTML5 Video Controls do not work

Question

I have done so much research and although some questions/comments do point me in the right direction, I continue to come to a stand still.

Summary: HTML5 video shows controls but they can't be clicked. When you browse over them they disappear. You cannot click pause, play, mute, nothing. Please help me figure out what is happening.

The website is www.innovo-medical.com (in case you want to see what's happening)

Formalities below:

 div.video-background { height: 100%; left: 0; overflow: hidden; /*position: fixed; top: 96px;*/ vertical-align: top; width: 1180px; /*z-index: -1; */ padding-top:75px; position:relative; margin: 0 auto; margin-bottom:-70px; } div.video-background video { min-height: 100%; min-width: 100%; z-index: -2 !important; } div.video-background > div { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 10; } div.video-background .circle-overlay { left: 50%; margin-left: -590px; position: absolute; top: 120px; } div.video-background .ui-video-background { display: none !important; } 

 <div class="video-background" id="video-background"> <video loop="loop" autoplay poster="{{ 'Ladyinblue.jpg' | asset_url }}" width="100%" controls="1"> <source src="{{ 'InnovoThermometer.mp4' | asset_url }}" type="video/mp4"> <source src="{{ 'InnovoThermometer.webm' | asset_url }}" type="video/webm"> <source src="{{ 'InnovoThermometer.ogg' | asset_url }}" type="video/ogg"> <img alt="" src="{{ 'Ladyinblue.jpg' | asset_url }}" width="640" height="360" title="No video playback capabilities, please download the video below"> </video> </div> 

Answer 1

Update

Although having the <img> tag inside the <video> tag is wrong, that's not your problem. You have a couple of elements overlapping your video control bar when the screen gets resized to be narrow. Instead of trying to cut the height of the offending elements and risk your layout's stability, just enter the following in your CSS:

div.video-background {
    z-index: 99999;
}

**OR**

div.video-background video {
    z-index: 1 !important;
}

---

You have an <img> tag inside the <video> tag, it needs to be removed:

<video loop="loop" autoplay="" poster="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/Ladyinblue.jpg?4954843373998890788" width="100%" controls="">
        <source src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/InnovoThermometer.mp4?4954843373998890788" type="video/mp4">
        <source src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/InnovoThermometer.webm?4954843373998890788" type="video/webm">
        <source src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/InnovoThermometer.ogg?4954843373998890788" type="video/ogg">
        <!---REMOVE THIS TAG--<img alt="" src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/Ladyinblue.jpg?4954843373998890788" width="640" height="360" title="No video playback capabilities, please download the video below">---REMOVE THIS TAG --->
    </video>

Besides the fact that it's invalid within a <video> tag it is inhibiting how it handles user interaction. The attribute [poster] is already in the <video> tag, so you don't need to worry about it not having a still image to display while it's idle.

Answer 2

Try using:

$('.container.main.content').css('z-index',-1)

I tested it in your webpage and worked.

It is because the div is placed in front of the video and because that the controls are not being displayed clickable .

Then if you remove set to -1 the z-index from the div, the video will be clickable .

This is one solution, but the right way is to find in the css file where you are setting the z-index value of the div and change it there, instead of adding a script block to fix something you could change in the source.

Hope it helps.