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

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.

Can you share link to page where you insert video?

Can you share html embed code? We can chec easier.

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.

https://streamable.com/gpqiln

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!

Cheers!

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 :(

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.  

@Nick_SquareKicker, Awesome!  Would you happen to know how to crop the video and adjust alignment so it plays within the dimensions (ie. 400x400) I prefer for my design?