Soo

I've solved it!
In Chrome and Safari, mute="muted" must be added to play automatically.

<video id="vid" width="320" height="240" autoplay="autoplay" loop="loop" muted="muted" controls> <source src="https://~om/tags/movie.mp4" type="video/mp4"> <source src="https://~" type="video/ogg"> </video>

on desktop! 

And it doesn't appear on the mobile at all....

Site URL: https://www.hdxwill.de

I have added autoplay video banners to a Squarespace website. The video works automatically good on "personal page". But if I change it to "public" and search the website address, the video will stop.

When someone searches website address, I want the video to play Immediately..

I couldn't find what the problem is.. Please help me.. T_T

*Used Code:

 

1. HTML

<div class=mainvideo>

<video width="895%" height="100%"

autoplay=1

loop=1

playsinline

autopause=0

 id="identvideo">

<source src="/s/Mainvideo.mp4" type="video/mp4">

</video>

</div>

 

2. Code Injection

-Header

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<script src="https://assets.codepen.io/3198845/WMContentTabsFREEv2.0.js"></script>

 

-Footer

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

$( document ).ready(function() {

function play_video(){

$('#identvideo').get(0).play()

 };

 window.setTimeout( play_video, 1100 ); // 1.0 seconds

});

</script>

 

3. CSS

/* Code to control banner animations and fallback for iPad and smartphones. */

 

/* General rule first - neither video nor fallback display */

#identvideo, #mobilefallback {

display:none;

}

 

/* Smartphones (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

#identvideo, #mobilefallback {

display:none;

}

}

 

/* iPads (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 768px)

 {

 

#identvideo {

display:none;

}

#mobilefallback {

display:inherit;

}

}

 

/* computer displays */

/* Desktops and laptops ----------- */

@media only screen

and (min-width : 600px) {

#identvideo {

display:inherit;

}

 

}

 

.mainvideo {

  background-position: center;

  background-size: cover;

  width: auto;

  height: 500px

    position: fixed; right:0; bottom:0;

    

}

 

body.homepage #page section:first-child .content-wrapper {

    padding: 0 !important;

    max-width: 100% !important;

    width: 100% !important;

    opacity: .9;

}

 

 

@media screen and (max-width:767px) {

div#block-609b9aa2e624461fc4c6fabf {

    padding-top: 0 !important;

    padding-bottom: 0 !important;