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

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

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.

Wow thanks for the reply dannyvaritek! Can you please tell me where I'd find this page collection ID?

Thanks!

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.

Also know that the padding-top snippet that I added in may not be necessary, so you might want to remove it -- depending on what looks best on your website.

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?

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