Something strange occurred.
My background video was functioning properly on all browsers until this morning. However, it suddenly stopped working on certain browsers. The video either does not play or freezes immediately.
I tried clearing my cache, reverting the changes, and even starting from scratch, but nothing worked.
As a last resort, I attempted to add the following script code:
<script> $(document).ready(function() { var vid = document.getElementById("bgvid"); vid.play(); }); </script>The website in question is www.medshopandbeyond.com.
The background video fails to work on Chrome, Opera, and Safari. It loads intermittently on Firefox and consistently plays on Internet Explorer.
I would greatly appreciate any help in resolving this issue.
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>
...
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%);
...
}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;
...
<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;
...
}