Jump to content

Code: Autoplay Video doesn't work on public site

Go to solution Solved by Guest,

Recommended Posts

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;

Link to comment
  • Solution

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>

Link to comment
  • 1 year later...
  • 4 weeks later...
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 by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.