Jump to content

How to put videos on loop and auto play with HTML/CSS?

Recommended Posts

Hi everyone! 

I wanted to change a few things from the videos with a custom htlm/css code. I want to remove the play arrow from the videos and I want to make these have autoplay and loop. 


I also have the specific html embed codes but I have no idea how to place these inside the HTML code.

Any suggestions? I appreciate the replies and thanks in advance.

Edited by Vidali
Link to comment

Hey! Thank for the reply @tuanphan

Here is the page I am talking about https://www.alanvidali.com/videos


So this is one of the links of the place where I host the website.



The embed code from the video hosting site is the following:


<div style="width:100%;height:0px;position:relative;padding-bottom:56.250%;"><iframe src="https://streamable.com/e/gpqiln" frameborder="0" width="100%" height="100%" allowfullscreen style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div>


I have no idea where to place and how to place this in the CSS/HTML custom code editor.


Thanks again for taking a look and I appreciate the support!



Edited by Vidali
Missing information.
Link to comment

With play icon, add to Home > Design > Custom CSS

svg.sqsVideoBlockPlaceholder-play {
    display: none;

With autoplay, try edit your code to this

<div style="width:100%;height:0px;position:relative;padding-bottom:56.250%;"><iframe src="https://streamable.com/e/gpqiln" frameborder="0" width="100%" height="100%" allowfullscreen style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;" autoplay loop></iframe></div>

If this can't help, I have no idea :(

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...

Hi @Vidali,

This is a bit easer if you have not found out a way.  I'm using Vimeo, and I have used the below iframe inside Squarespace's video block.  But instead of adding the link, you can click <>  and insert this code.  

I am using it on our new SquareKicker website for our learn page here:  https://squarekicker.com/features

Just swap out the vimeo number for yours.  See screenshot below for example.

<iframe src="https://player.vimeo.com/video/466007910?autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=0&portrait=0" width="800" height= "500"  frameborder="0" allow="autoplay; fullscreen"  allowfullscreen></iframe>

It also will auto play on mobile.  You can adjust the settings for controls back to 1 instead 0.  And muted is background=1, so if you want sound change that, switch it to 0.  

Autoplay Video Block.png

Edited by Nick_SquareKicker

SquareKickerHi, I'm Nick, CEO & Co-Founder at squarekicker.com.  Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. 

Tutorials  ●  News  ●  Inspiration  ●  Features  ●  FAQS


Link to comment
  • 1 year later...

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.