Chrome stopped video when page is load - google-chrome

Question

I have a video with autoplay on my website http://vakuutustiedot.fi/arkhaltia/ and it works perfectly on Mozilla but not working in Chrome. The video stopped instantly when the page was loaded and it never played until you refresh the page(at least 2 times).
<div class="homepage-hero-module">
<div class="video-container">
<video id="vid" autoplay loop class="fillWidth">
<source src="video/video1.mp4" type="video/mp4" />
<source src="video/video1.webm" type="video/webm" />
</video>
<div class="poster hidden">
<img src="images/smoke.jpg" alt="">
</div>
<script>
$('#vid')[0].play()
</script>
</div>
</div>
JS:
$( document ).ready(function() {
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
function scaleVideoContainer() {
var height = $(window).height() + 5;
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height() + 5,
videoWidth,
videoHeight;
// console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width');
$(this).width(windowWidth);
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
Actually I have noticed that if go through link it works immediately but if you refresh it's not working again. Who knows what's the problem?

Answer 1

It may be that you need to add the 'muted' attribute to allow it autoplay - see this example:
The snippet below plays in chrome, for example, if you want a reference:
<video autoplay muted poster="path to video" id="bgvid">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>