Categories
Squarespace Plugin

Squarespace Plugin: Modify embedded Vimeo

Embedded Vimeo video is a useful feature of Squarespace, but client wanted to improve it’s look and feel…

Have you used Vimeo?

Embedding videos from another host like Vimeo helps your site load faster, enables visitors to share your videos, and provides multiple options for video hosting

Alex is a video director, therefor he used a lot of embedded videos on his Squarespace website…

Let’s see what was his requirements

I’m looking for a developer experienced with Squarespace who can customize the video player block to make it autoplay a muted preview, with a click to play the video from the start with sound.
For an example of what I’m trying to achieve, see here:
I contacted Squarespace and they tell me this is done via developer mode – I am looking for someone familiar with Squarespace developer mode customization to do this.

Custom Vimeo embed for Squarespace | HTML | Website Design | JavaScript | CSS | HTML5 | Freelancer
Default behavior – Video control on default
What did I do to achieve?

One thing you should now, to make a video auto play on all device, you should mute it when playing, vimeo can provide the options, so I suggest him to update his embedded iframe url on the video

  • I used jQuery select the video elements on the page
  • Have a covered mask over the video with a play button icon
  • Take advantage of vimeo player for trigger video play on click
Here is how the final outcome

The output is quite impressive to client, he was very satisfied

Great work and extremely fast! He coded a custom video embed on my Squarespace site in less than 8 hours.

Alex F.
@VVEEKENDS – Culver City, United States

Leave a Reply