How do I add padding and border around an embedded video?

Hi helpers, thanks in advance! I'd like to add 1px padding and 1px border around the video that is shown here: https://muenchworkshops.squarespace.com/blog/2012/11/30/camera-settings

what is my CSS?

Thanks!

Do you want to target this to all videos on your site, or just this one?

If you just want to target this particular video, you can add the required CSS code into your iframe code. This is referred to as "inline style".

Insert this line into the existing iframe HTML:

style="padding:1px;border:1px solid black;"

This will achieve the desired effect but it will target it only to this particular element. If you need this for all video elements, the situation will be different.

You will need to manually add the CSS to each element, or edit your site-wide CSS (and the code will be different, so post back here if that is the case).

A copy of the complete iframe code with padding and border follows for your reference:

<iframe width="640" height="360" style="padding:1px;border:1px solid black;" src="http://api.smugmug.com/services/embed/2249658140_P2BGWph?width=640&height=360&nohome&nologo">

Hope that helps.

I'd like to add it to my site, for all videos. 1px padding and 1px border #000. Thanks!

I believe that you would need to target all code block elements if you want to do that.

SQSP has no way of differentiating between a code block that contains (for example) an embedded audio player or (in your case) a code block that contains a video file.

So all code block elements would be affected by this change. If that's not an issue for you, then we can locate the right element to adjust - but remember that all code blocks will be affected by this change.

Another forum person might be able to confirm or correct this ...

The best way to do this would be to use a video block - then you could style everything based on the classes that get added to video block automatically.