Jump to content

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

Recommended Posts

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!

Naomi

Link to comment
  • Replies 6
  • Views 5.2k
  • Created
  • Last Reply

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 comment

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 comment
  • 1 year later...

/* 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

!important

. 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

1em

from

.7em

-

1.2em

to fit your taste.

The

padding-top

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • 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.