Code: Autoplay Video doesn't work on public site

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;

This happen on desktop or mobile device?

on desktop! 

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

Thanks you Soo!!! Adding muted="muted" made it work on my public site, even though my videos have no sound. 

 

On 6/29/2021 at 3:39 PM, Soo said:

In Chrome and Safari, mute="muted" must be added to play automatically.

Yes, autoplay must be accompanied by muted, even if there is no soundtrack.

However, for the benefit of anyone reading this post, the syntax in the example above has been deprecated. Instead of autoplay="autoplay" you should now include the attribute autoplay. It is the same for the muted attribute; just add muted.

Better still, you don't need to use code to autoplay a video in Video Block anymore. These options are now built into the Video Block.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited January 26, 2023 by paul2009