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>