Jump to content

Search the Community

Showing results for tags 'autoplay'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • Resources
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Hey, everyone! I have a Squarespace 7.1 site and I'm having an issue. I have a gallery block which I have set to "slideshow:reel" gallery type. I want the images to autoplay (which was a feature available in previous versions). I've tried the code injection from this thread, but I haven't had any luck getting it to work: https://forum.squarespace.com/topic/26409-summary-block-how-can-i-set-the-carousel-to-autoplay/ How can I get this gallery to autoplay/auto-scroll? Thank you!
  2. Really loving the ability to have an autoplay video as the front page of the website. Though, there are black bars above and below the video when in mobile mode. The video plays fine but these black bars are messing with the logo, etc. It's like there is some padding, spacing, or formatting problem. On tablet and desktop it looks amazing and there are no black bars. How can these bars be removed? This is using a Vimeo video. 1920 x 1080. Link: https://vimeo.com/789530662 If I use the link only it does not autoplay. Here is the embed code: <!-- Code for Vimeo auto play v1.1 --> <div style="padding:56.25% 0 0 0;position:relative;"> <iframe allow="autoplay; fullscreen" allowfullscreen src="https://player.vimeo.com/video/789530662?background=1&amp;wmode=opaque" style="background-color: # #0D0D0D;position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0"> </iframe> </div>
  3. Hi SS group. Im looking to create an automated rolling banner of images on my site, but ive stumbled across a roadblock! I have the solid option, with buttons to scroll through manually, but I like the idea of having it automated. I have none of the drop menus available, which another site its telling me to look for. Ive got the required code for this, but without the options of Banner slideshow or Carousel... it won't work. Any guidance from someone more knowledgable of SS? Thanks!
  4. 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;
  5. Hi there, I finished designing a website for a client, but we have a repeated issue with images loading. They take a second to load (as things do), but in that time the title of the photo pops up in large black text and is then replaced by the photo in a jagged one-two loading style. We'd prefer if the spaces just stayed blank until the images loaded or if they faded in. Is there a way to fix this? Why might this problem be happening? This happens on the home page of the site as well. Any advice is appreciated! Thanks! wigshairmakeup.com wigshairmakeup.com/archive
  6. I have a video linked from Vimeo on my website. Is it possible to make the video auto-play as soon as the user scrolls onto the video? I don't want to embed the video because it is a large, 4K video file and my understanding is that you want a small video file if you're going to embed. I would like to keep everything the same, but I would like the video to automatically start playing once the user lands on it. Is that possible? Also, I know there is a a feature to add the video as the entire background, but that's not something I'd like to do. https://www.uurth.co/washinginstructions
  7. How do you get my cell phone to autoplay my videos? It works on the desktop and an iPad, but not my iPhone 14. Here is my code I use in my Embed block. <center> <video autoplay="autoplay" loop="true" width="550" muted="muted" controls> <source src="https://static1.squarespace.com/static/636d6fd9f542a10598b6bd24/t/63b7430ad3ac8054cc6b8e45/1672954637057/my_video_name.mp4" type="video/mp4"/> </video> </center>
  8. I can make numerous videos autoplay on my pages, but I can't upload any video larger than 12mb. How can I upload larger videos? I do not want to use YouTube or anything like that having names across my video. Here's what I do, but please tell me if you have a way to upload large videos. I go to Design, Custom CSS, Manage Custom Files, Upload (your video) Copy that code (I show it at bottom) Go to your page, create an Embed or Code block and paste that code you just copied, I did add some more code to make it work on all devices, not just my personal page. <center> <video autoplay="autoplay" loop="true" width="550" muted="muted" controls> <source src="https://static1.squarespace.com/static/636d6fd9f542a10598b6bd24/t/63b7430ad3ac8054cc6b8e45/1672954637057/name_of _my_video.mp4" type="video/mp4"/> </video> </center>
  9. Site URL: https://www.nondysdesigns.com/ Hey guys... I've been trying to find articles on How to embed or upload a video to Squarespace as a Video Block (not banner image) but to disable auto loop/autoplay and also take away the play, pause, hover, etc,. functions. Basically, I want it to be like a gif, but not using a gif file because gifs are large files that I don't want on the website. I want to use Links from Youtube or Vimeo to create these autoplaying type gifs. I found what it seems to be a great blog post on how to do it here https://www.justinwyne.com/thoughts/2018/5/15/how-to-embed-borderless-autoplaying-looping-videos-on-squarespace But the only thing is that I don't think there's enough steps for me to follow along. I have to download a third party application and host my URL somewhere... It all seems supppperrrrr complicated and I'm wondering if there's another way to do this? I found another post here https://www.rebeccagracedesigns.com/blog/youtube-autoplay-and-loop that is really helpful and is an autoplay video, but the video has the play and pause type of functions that I don't want, also the sound isn't automatically playing either, you have to click on the sound to hear it. Also something to keep in mind, i'd like to have the end result to be a portrait photo and not in landscape. Thank you in advanced!
  10. Site URL: https://jasonyuan.design/ I am building a new portfolio website using the Cami template on 7.1 On the homepage, I will have a grid of projects that link through to project pages – there are many ways to do this with different blocks, however, I want the project thumbnail link to be a looping, autoplaying video with with no controls whatsoever. GIFs are too heavy, and when I recreate the project thumbnail using a video block, you cannot make it click through to the project, and despite using Vimeo pro for hosting, pause controls still appear on hover. (Screenshot attached) Is there anyway to do this like this example? – https://jasonyuan.design/
  11. I have a video I linked from Vimeo onto my website. At the end, I want the video to replay automatically. I don't like that when it ends, it brings up other videos from my Vimeo page (of which have nothing to do with the webpage). This is the video I am referring to, on my clothing website: https://www.uurth.co/washinginstructions Please reference the attached images as reference to further illustrate what I'm talking about. Thanks.
  12. Hey all: I'm working in 7.1. I'm trying to do an auto-scroll of a carousel, but instead of using a photo block, I'm using a People block. I've looked at all of the CCS help pages, and they seem to be code for blogs or photo blocks. I've tried them, and they don't work. Is there any way to get auto-scroll for a People block? Thanks
  13. Hi Experts, Can someone please advice on why the carousal does not auto transition (auto rotate) for our website on Squarespace. We are going live early next week. Need some advice here. https://mayflower-ruby-lpwl.squarespace.com -Ashish
  14. Autoplay is a huge design feature for my website and it works perfectly on Chrome but not on Safari. This is affecting a number of my pages. View the page on Chrome to see how it should look and then view it on safari to see the issue. https://www.twinforkswindow.com/profile https://www.twinforkswindow.com/fleetwood https://www.twinforkswindow.com/skyframe https://www.twinforkswindow.com/installation (Video at the bottom of page)
  15. Hi Experts, Can someone please advice on why the carousal does not auto transition (auto rotate) for our website on Squarespace. We are going live early next week. Need some advice here. https://mayflower-ruby-lpwl.squarespace.com -Ashish
  16. Hi! In the homepage of my website www.diegphoto.com, I have code to autoplay portfolio categories. The problem is that the image of the first category is not displayed since the function is executed before the page loads. I would like to set a timeout, or a code so that it does not autoplay until the images are loaded. My site is diegphoto.com and the password is Asturias This is the code: <!--beyondspace autoplay Hover Portfolio start--> <script> (function(){ window.addEventListener('load', () => { beyAutoPlayPortfolio(4000); // change the speed of transition }); })() function beyAutoPlayPortfolio(e){let t=document.querySelectorAll(".portfolio-hover-items-list > li");if(t.length>1){let o=new Event("mouseenter"),l=null,r=function(){let i=document.querySelector('.portfolio-hover-item[data-active="true"]').closest("li").nextElementSibling;i||(i=t[0]),i.querySelector("a").dispatchEvent(o),l=setTimeout(r,e)};r(),t.forEach(e=>{e.querySelector("a").addEventListener("mouseenter",function(e){e.isTrusted&&clearTimeout(l)}),e.querySelector("a").addEventListener("mouseleave",function(e){e.isTrusted&&r()})})}} </script> <!--beyondspace autoplay Hover Portfolio end--> Thank you in advance!
  17. Hi! I have an animation playing on my landing page that sometimes doesn't play all the way through. It seems to get stuck 90% through and just restart. I created a blank section with the video as the background. Bonus: Does anyone know if there is a way to get the scrolling to momentarily lock onto the section so then the video is centered for the user?
  18. Hello! I have scrolling testimonials on our website using a Custom CSS code. I have no problem adjusting the seconds between transitions to new slides; however, I'd like to make the transition itself slower, so it feels less jarring. Could someone please provide me with the right code for this? Let me know! I've pasted my current code below for your reference: <script> (function docReady(fn) { // see if DOM is already available if (document.readyState === "complete" || document.readyState === "interactive") { // call on next available tick setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } })(() => { if ( window.location == window.parent.location ) { const reelControls = document.querySelectorAll('section[data-section-id="630305ced17aa33b3d1a4e54"] .user-items-list-carousel__arrow-button--right'); reelControls.forEach(reelControl => { (function reelTimer() { setTimeout(() => { reelControl.click(); reelTimer(); }, 12000); // change this value to change the speed })(); }) } }); </script> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-YQQGCZVL6V"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-YQQGCZVL6V'); </script>
  19. Website: https://www.thesoaresprotocol.com/ Hi there! I am trying to find a way to place a 4K logo animation video prior to my visitors reaching the homepage. An autoplay with no embedded frame and no additional visuals. Something minimalist and filling the entire screen. Is there a code block I could use? And if yes, where should I upload my 4K file? Thank you in advance.
  20. I've uploaded audio via the audio block. Trying to figure out how to set it to autoplay upon page load. Here is my website https://bellhop-final.squarespace.com/ pass:demo At the moment, the audio block controls are positioned at the bottom left on hero section. thank you
  21. Hi, i would like to add n automatic carousel to my site therefore users do not have to manually use the scroll buttons and it moves by itsself Is there any way to do this? Website passsword is password Thanks for all help
  22. Hi all! Link to the page I'm working on: https://www.hooshdesigns.com.au/mango-silk-collective-copy I'm currently trying to have three main images autoplay. Currently it's set to Gallery: Strips, but I'm hoping there's a way to have these three images auto-scroll through. I've tried using the Gallery: Reel, but the images repeat over because there's only three, and I can't seem to get the images in large rectangles with the Reel like I can with the Strips. Essentially, I'm trying to maintain the same appearance with the large Strips but with an autoplay effect - does anyone know if this is possible? Thanks in advance!
  23. https://lauren-mycroft-2.squarespace.com/ password: mycroft When adding a video block to 7.1, does anyone know if you can remove the PLAY button and have the video just autoplay? In this case, the video sound is particularly important to the client so I can't use the (easy and wonderful, yet silent) background video video function. Alternatively, if anyone knows how to code the background video to autoplay sound...that would also solve my problem!
  24. Hi All, Been trying to work out why my videos no longer auto play on safari. https://www.karenyeomans.com/moving Embed code added: <div> <iframe src="https://player.vimeo.com/video/571612294?autoplay=1&loop=1&title=0&byline=0&portrait=0&autopause=0&muted=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> </div> ALSO Tweaked on Vimeo - Ideally I would like minimal interference playback controls on overview page, simply tiles of moving and stills. I'd love the expand out to new window to play with sound/controls. No option to set this up in Vimeo but any code ideas around this in Squarespace? Screenshots: 1. Vimeo set-up 2. Load Safari 3. Load Chrome Any ideas/help appreciated. Thx
  25. Just discovered the new auto-layout option in headlines to create a rotating banner with text - yay!! From what I can tell right now - it has to be clicked to change...hoping someone can help me have it auto-play/auto-scroll/loop? Maybe it's a an option but I'm just not seeing it? Thanks!
  • 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.