Good, what happened.
Previously, my background video worked on all browsers. Then suddenly this morning it stopped working on some browsers. The video stops playing or freezes immediately.
I cleared my cache and nothing. Then I tried to revert the changes and nothing. I also tried to write it from scratch and nothing.
The last thing I tried was to add this script code:
<script> $(document).ready(function() { var vid = document.getElementById("bgvid"); vid.play(); }); </script>
Website www.medshopandbeyond.com.
Background video does not work on chrome, opera, safari. It loads SOMETIMES in firefox, and it ALWAYS plays in Internet Explorer.
How can i fix this? Your help is really appreciated
HTML markup for video and content:
{% if template == 'index' %} <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 video:
div.video-background { height: 58em; left: 0; overflow: hidden; vertical-align: top; width: 100%; 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 content:
.btn_action_22 { background: #00559f !important; border: 1px solid #00559f !important; color: #fff !important; 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; color: #000 !important; 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_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; color: #000 !important; display:inline-block; } .headline_22 h1 { color: #000 !important; 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; } }
source share