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

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

Question

4 answers to this question

Recommended Posts

  • 0

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.

Edited by Silver Vine
Clarified the answer in relation to performing this customisation via CSS site-wide.

Share this post


Link to post
  • 0

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...