background video working well on firefox but not worked in Chrome can anyone tell me the problem I tried my best to solve this but failed every time.but some time automatically run on chrome and self-stoped.
This is the link to the website.
Add mute in JQuery for the video to play in Chrome
<!-- home banner video -->
<video id="video" poster="https://briolaundry.com/wp-content/uploads/2017/05/bg-main.jpg" autoplay loop>
<!--<source src=""> -->
<source src="https://briolaundry.com/wp-content/uploads/2017/05/Brio-HomePage-Hero-473358135.webm">
<source src="https://briolaundry.com/wp-content/uploads/2017/05/home-banner.ogv">
</video>
JQuery:
window.onload = function () {
var element = document.getElementById('video');
element.muted = "muted";
}
Try with this: Add parameters like below
<video id="bg_video" playsinline autoplay muted loop controls="controls">
Then remove the controls with CSS
/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */
*::-webkit-media-controls-panel {
display: none!important;
-webkit-appearance: none;
}
/* Old shadow dom for play button */
*::-webkit-media-controls-play-button {
display: none!important;
-webkit-appearance: none;
}
/* New shadow dom for play button */
/* This one works! */
*::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}