Как исправить фоновое видео, которое перестало работать в некоторых браузерах ⇐ CSS

[Гость]

Итак, вот что произошло.

Раньше мое фоновое видео работало во всех браузерах. И вдруг сегодня утром он перестал работать в некоторых браузерах. Видео больше не воспроизводится или сразу зависает

Я очистил кеш, но ничего. Затем я попытался отменить изменения, но ничего. Я также попробовал написать его заново с нуля, но ничего.

Последнее, что я попробовал, это добавить этот код сценария:

Код: Выделить всё

 $(document).ready(function() { var vid = document.getElementById("bgvid"); vid.play(); }); < /code>
< /div>
< /div>
< /p>

Веб -сайт www.medshopandbeyond.com. < / p>

Не работает фоновое видео на хроме, опере, сафари. Он ИНОГДА загружается в Firefox и ВСЕГДА воспроизводится в Internet Explorer.

Как я могу это исправить? Ваша помощь очень ценна.

HTML-разметка видео и контента:



 {% if template == 'index' %}






[i]




Beyond Limitations
Med Shop and Beyond stands for Freedom, Lifestyle, Wellness and Family.  We strive to provide high quality medical supplies and equipment to our customers


[url=http://www.medshopandbeyond.com/collections/all]
Start Shopping
[/i]
[/url]

CSS видео:

Код: Выделить всё

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 контента:

Код: Выделить всё

/*************
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;

}
}

Подробнее здесь: https://stackoverflow.com/questions/357 ... n-browsers