How to Create Stylish CSS Video Borders

How to make stylish CSS video borders for your video embedments without the extra weight of graphics.

How To Make CSS Video Borders

While I was embedding a YouTube video in a previous post, I noticed there was nothing separating the video from the body of the page because the background of the video was the same as the post body background colour.

It looked odd so I added some CSS border properties to the iframe to define the outline of the video more easily.

Before

Here is what the video looked like before adding the CSS ..

After

Here is what the video looks like after adding the CSS ..

As you can see, it’s a big improvement not only on this page but especially on the page where the video is needed to tell the story. It’s also very lightweight because no graphics were used which speeds up load times and save on bandwidth.

How to make CSS Video Borders

Declare some CSS border property rules to the iframe element.

The following code is what was used in the above example. It contains the regular Youtube video embed code plus a class attribute class=”my_class_name” was added into it.

HTML

<iframe class="my_class_name" width="640" height="360" src="https://www.youtube.com/embed/ZRMvVoL_NNk?showinfo=0" frameborder="0" allowfullscreen></iframe>

The class attribute class=”my_class_name” points to the following style rules in a CSS style sheet. It tells the style sheet to add the following CSS style rules to the iframe element.

CSS

.my_class_name {
	margin: 0 auto;
	border: 10px outset #ddd;
}

The Margin Property rules margin: 0 auto; tells the stylesheet to place the video into the center of the container. The Border Property rules border: 10px outset #ddd; tells the stylesheet to place a 10px wide outset border with hex color #ddd around the video.

How to Add to Your Website

Step 1 – CSS: To place the above border around your embedded videos simply paste the above CSS into your website stylesheet. Your website stylesheet is usually called style.css.

Step 2 – HTML: Add the Class Attribute class=”my_class_name” into your iframe video embed code as shown above.

Tip: If you are using WordPress, make sure you add the video embed code in Text mode not Visual.

Remember you can rename my_class_name into what makes sense to you, but the name must be the same in both the HTML and the CSS. The name must begin with an English alphabet letter and cannot begin with a number or any other character.

You can also put the CSS directly into the iframe. Simply replace
class=”my_class_name” with style=”margin: 0 auto; border: 20px solid #ddd;” Example:

HTML

<iframe style="margin: 0 auto; border: 20px solid #ddd;"></iframe>

Warning

Putting CSS directly into a HTML element is not best practice because once you have embedded several videos with one particular style it is a time consuming process to change them all later into a different style.

You would probably only use this method on websites where you cannot access the stylesheet directly, such as if you were Guest Posting.

More CSS Video Border Examples

Example 2 – Solid Border

Video_Placeholder

CSS

.my_class_name {
	margin: 0 auto;
	border: 20px solid #ddd;
}

Example 3 – Groove Border

Video_Placeholder

CSS

.my_class_name {
	margin: 0 auto;
	border: 20px groove #ddd;
}

Example 4 – Ridge Border

Video_Placeholder

CSS

.my_class_name {
	margin: 0 auto;
	border: 20px ridge #ddd;
}

Example 5 – Inset Border

Video_Placeholder

CSS

.my_class_name {
	margin: 0 auto;
	border: 10px inset #ddd;
}

Example 6 – Double Border

Video_Placeholder

CSS

.my_class_name {
	margin: 0 auto;
	border: 10px double #ddd;
}

Example 7 – Dashed Border

Video_Placeholder

CSS

.my_class_name {
	margin: 0 auto;
	border: 5px dashed #dd0000;
}

Example 8 – Dotted Border

Video_Placeholder

CSS

.my_class_name {
	margin: 0 auto;
	border: 5px dotted #dd0000;
}

Show Us

Please let me know in the comments below if you found a use for CSS Video Borders by linking your name to the page where you used them along with any thoughts you may have. Have fun 🙂

Sources

Related

You might also like to know how to make attractive Johnson Boxes with HTML and CSS which improves readership by drawing the reader deeper into your post.

Remember to always edit your HTML correctly. If your HTML editing has been turning out funny (not funny haha), then you’ll need to read this post.

The easy way to create beautiful hyperlink buttons with CSS for FREE.

My top 10 list for CSS study and reference.

{ 0 comments… add one }

Leave a Comment