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;
LcsProduction reacted to a post in a topic:
Code: Autoplay Video doesn't work on public site
