Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Code: Autoplay Video doesn't work on public site


Soo

Question

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

3 answers to this question

Recommended Posts

  • 0

This happen on desktop or mobile device?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

Create an account or sign in to comment

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

×
×
  • Create New...