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.