Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How do I increase (change) font size of Video Block description (caption)?

Go to solution Solved by dannyvaritek,


I can't find the answer! I've already tried image block caption CSS workarounds. I can't find one specifically for video blocks. RIght now, the caption that shows up (beneath the video) is so tiny that it's very difficult to read. This font category doesn't seem to be listed in the DIY Edits panel either.

Please help!


Edited by Naomi777
Link to post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 2

I would add this to your Page Settings:

<style> .collection-xxxxxxx .video-caption {    font-size: 2em;}</style>

You see above that I have the font size set to "2em". One "em" value is the standard font size for your page. If you have your page font size set to 12pt, then 1em = 12pt; thus, 2em = 24pt, and .5em = 6pt. So, 2em is a drastic increase. I'd gradually raise your font size from 1.2em to 1.4em, etc. to see what looks best on your site.

I tested this out on my page, and it works perfectly. Up above, the .collection-xxxxxxx should be filled in with your page's collection ID.

However, when I set this up on my site, the text rammed right into my video player, with no space in between (which isn't exactly pretty). So I added this to my custom CSS:

padding-top: 5px;

So, all in all, my code looked like this:

<style>  .collection-xxxxxxx .video-caption {    font-size: 2em;    padding-top:5px;}</style>

Hope this wasn't too confusing. There's always a chance this won't work with your page. I was experimenting on the Marquee Template.

Link to post
  • 0

You'll find your collection ID in the URL while you're on the page editor for the page that you want this code to effect. My URL is "varsaire.squarespace.com/config/#module=content&collectionId=53a8dceee4b0cd8d798f54f0", and my collection ID is "53a8dceee4b0cd8d798f54f0". So you see that it's that last string of characters in the URL.

Link to post
  • 0

This answer doesn't work for me because my Marquee template has font-size hard-coded as inline CSS, so adding custom CSS code has no effect.

<span style="font-size: 13px; @media">video caption text</span>

I don't see any way to get around inline CSS. Do you?

Edited by merchako
Link to post
  • 0

/* caption font size on videos */
.video-caption * { 
 font-size: 1em !important; /* the inline styles on video captions will win if we don't make this important */
 padding-top: 5px; 

Drop this in Design > Custom CSS. @dannyvaritek's answer is a little more complicated than this needs to be. You don't need to specify the collection if you're comfortable with this applying to all video captions.

On my instance of Marquee, the video captions look too small because there's inline CSS sizing the font to 13px. We can override the inline with


. By re-pegging the caption size to page's font size, you'll can get a more reasonably-sized fonts, especially on mobile devices (which is where I noticed the problem). Vary






to fit your taste.



statement is there because @dannyvaritek was kinda right about that.

Link to post
This topic is now closed to further replies.

  • Create New...