Okay here's what happened.
My background video was working on all browsers previously. Then Suddenly this morning it stopped working on some browsers. The video no longer player or freezes immediately
I cleared my cache and nothing. Then I tried reverting the changes and nothing. I also tried writing it again from scratch and nothing.
The last thing I tried is adding this script code:
<script> $(document).ready(function() { var vid = document.getElementById("bgvid"); vid.play(); }); </script>The website is www.medshopandbeyond.com.
The background video does not work on chrome, opera, safari. It loads SOMETIMES on firefox and it ALWAYS plays on Internet Explorer.
How can I fix this? Your help is truly appreciated
HTML Markup of Video and Content:
{% if template == 'index' %}
<!--<div id="slideshow-shadow"></div>-->
<div class="video-background" id="video-background">
<video loop="loop" autoplay poster="{{ 'photo-1445.jpg' | asset_url }}" width="100%">
<source src="{{ 'Newest4.mp4' | asset_url }}" type="video/mp4">
<source src="{{ 'Newest4.webm' | asset_url }}" type="video/webm">
<source src="{{ 'home.ogg' | asset_url }}" type="video/ogg">
<img alt="" src="{{ 'home-placeholder.jpg' | asset_url }}" width="640" height="360" title="No video playback capabilities, please download the video below">
</video>
<div class="headline_22">
<table>
<tr><td width="50%"></td><td width="50%" class="headline_content">
<h1>Beyond Limitations</h1>
<p>Med Shop and Beyond stands for Freedom, Lifestyle, Wellness and Family. We strive to provide high quality medical supplies and equipment to our customers</p>
</td></tr>
<tr><td width="50%"></td><td width="50%" class="tb_action">
<a href="http://www.medshopandbeyond.com/collections/all" class="btn_action_22">
<span>Start Shopping</span>
<i class="ico_arrow"></i>
</a>
</td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr></tr>
</table>
</div>
</div>CSS of the Video:
div.video-background {
height: 58em;
left: 0;
overflow: hidden;
/*position: fixed;
top: 96px;*/
vertical-align: top;
width: 100%;
/*z-index: -1; */
margin-top:-16px;
position:relative;
margin-bottom: 0px;
-webkit-filter: brightness(95%);
-moz-filter: brightness(95%);
-khtml-filter: brightness(95%);
-ms-filter: brightness(95%);
-o-filter: brightness(95%);
}
div.video-background video {
min-height: 850px;;
min-width: 100%;
z-index: -2 !important;
}
div.video-background > div {
height: 850px;
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;
}CSS of Content:
/*************
Call to Action Button - Style 22
******************/
.btn_action_22 {
background: #00559f !important; /* Change button background color */
border: 1px solid #00559f !important; /* Change button border color */
color: #fff !important; /* Change button text color */
line-height: 1.2;
font-size: 30px;
display: inline-block;
padding: 22px 45px 23px;
position: absolute;
text-decoration: none;
text-transform: uppercase;
z-index: 3;
white-space: nowrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
font-family: Lato;
font-weight: 100;
}
.btn_action_22 span {
left: 12px;
position: relative;
-o-transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}
.btn_action_22 .ico_arrow {
background: url(ico_arrow_w.png) 0 center no-repeat;
display: inline-block;
height: 16px;
width: 18px;
position: relative;
left: 0;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
-o-transition: all .4s;
-moz-transition: all .4s;
-webkit-transition: all .4s;
transition: all .4s;
}
.btn_action_22:hover {
background: #69d617 !important; /* Change button background color when mouse over */
color: #000 !important; /* Change button text color when mouse over */
border:1px solid #69d617 !important;
}
.btn_action_22:hover span {
left: -12px;
}
.btn_action_22:hover .ico_arrow {
opacity: 1;
filter: alpha(opacity=100);
left: 12px;
}
/************** Headline Item *************/
.headline_22 {
background-image:url("{{ 'man-909049_1920.jpg' | asset_url }}");
height: 70em;
position: relative;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: -20px;
background-position: center top;
width: 100%;
margin-top: 220px;
/*border-bottom: 1px solid #e6e6e6;*/
color: #000 !important; /* Change headline background color */
display:inline-block;
}
.headline_22 h1 {
color: #000 !important; /* Change headline title text color */
font-size: 52px;
line-height: 1.2;
text-transform: uppercase;
font-weight: 100;
font-family: Lato;
padding: 0;
margin: -1px 0 9px;
background-color:#fff;
opacity:0.5;
}
.headline_22 p {
line-height: 1.4;
font-size: 39px;
margin: 0 0 10px;
padding: -10px;
font-family: Lato;
font-weight: 100;
word-spacing: -1px;
background-color:#fff;
opacity:0.5;
}
.headline_22 table {
border-spacing: 0;
width: 100%;
}
.headline_22 td {
vertical-align: top;
padding: 25px;
}
.headline_22 .headline_content {
padding: 20px 25px 9px;
text-align: justify;
}
@media (max-width: 979px) {
.headline_22 .headline_content {
text-align: center;
}
.headline_22 td {
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn_action_22 {
text-align: center;
width: 100%;
margin-left: -2px;
}
}
@media (max-width: 479px) {
.btn_action_22 {
padding: 18px 30px;
margin-left: -2px;
}
}