How to fix a background video that stopped working on certain browsers

Question

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;
        
	}
}

Answer 1

You have to add different video formats, so try converting them and then adding them like this so each browser uses the corresponding video format.

<video controls="controls" poster="linktoposter.jpg" width="640" height="360">
 <source src="linktomovie.mp4" type="video/mp4" />
 <source src="linktomovie.webm" type="video/webm" />
 <source src="linktomovie.ogv" type="video/ogg" />
 <!-- Fallback object using Flow Player -->
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
 <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
 <param name="allowFullScreen" value="true" />
 <param name="wmode" value="transparent" />
 <param name="flashVars" value="config={'playlist':[ 'linktoposter.jpg',{'url':'linktomovie.mp4','autoPlay':false}]}" />
 <img alt="My Movie" src="linktoposter.jpg" width="640" height="360" title="No video playback capabilities, please download the video below." />
 </object>
 <!-- Fallback Text -->
 Your browser does not appear to support a browser. Please download the video below.
</video>

If you want to make a full-width background video for cross-browser use this.

http://www.kevinfremon.com/fullscreen-background-video-using-html5-and-css/