Jump to content

How can I add a video as the Featured Image for a blog post (Souto Theme)

Go to solution Solved by tuanphan,

Recommended Posts

Working with the Souto theme and would really like to use video for the featured image (in Blog Post Settings - attached).

At the moment, I know it's possible to add a .gif, but these are such low quality.

If anyone knows how to code this I would really appreciate the help!

Screenshot 2024-05-22 at 13.49.22.png

Link to comment
1 hour ago, JordyTery said:

Thanks so much.

This does not work, but perhaps I did not explain the issue properly.

The Souto theme's home page is set as a blog -- see: https://souto-demo.squarespace.com/

What I am struggling with is how to have one of the homepage images set as a video.

When I go into each individual blog post's settings, I can only upload an image to be  featured on the homepage. 
Here's a video to explain: https://www.loom.com/share/bd9368c3568e44b5a684c5a19ebc2a1f?sid=526415f3-ccb1-4367-b15c-1b81f9f242bd

If you have any solutions I appreciate it!






Link to comment

@SaraVada you are right; we are limited to GIFs and images inside a blog thumbnail.

We can only assume why but I bet the main reasoning is the load time, and the autoplay/audio accessibility dilemma. Whatever the reason is, I don't have a quick code fix that can replace one or two of those images with a video. 💔

The best solution might be to manually create a blog post list on your home page.

You could manually add the image or video, and place a text block underneath with the title, expert, and a link. If you blog a few times a week like I do it would be an absolute nightmare, but it's the only option available at this time.

I will add that from an SEO & UX standpoint, keeping the file size small with optimized GIFs can improve performance... so until we have the feature, skipping the custom code might be a better bet for your site traffic. 😬

Sorry I don't have a better answer, but I hope this explanation helps & wish you the best of luck with your project!

P.S. If anyone reading this has a fancy javascript plugin that can target specific blog posts on the collection list page by some magical entry item id, PLEASE share it because that would be SO cool!! 

🤓 Creator of InsideTheSquare.co

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css




Link to comment
  • 3 weeks later...
  • Solution

@SaraVada You can use this to Website > Website Tools > Custom CSS

a.blog-more-link {
    font-size: 0 !important;
a.blog-more-link:before {
    content: "Learn more";
    font-size: 18px !important;
    border-bottom: 1px solid currentColor;
a.blog-more-link:after {
    display: none;


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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.