Jump to content

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

Recommended Posts

  • Replies 4
  • Views 70.4k
  • Created
  • Last Reply

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.

Link to comment

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

Link to comment


This topic is now archived and is 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.