Monday, November 23, 2020
Home Blogging How to Add an iframe Border Around a Video Embed

How to Add an iframe Border Around a Video Embed

Do you need to add an iframe border round your video embed? Lately a consumer requested us for a means so as to add a border round their movies in WordPress. Since you should utilize each iframe and oEmbed so as to add movies in WordPress, we’ll present you easy methods to add an iframe border round a video embed in addition to easy methods to add a border round oEmbed movies in WordPress.

Including Border Round iframe Movies in WordPress

Very first thing you might want to do is to open a submit or web page containing your iframe video embed code. A typical iframe embed code ought to seems to be one thing like this:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/qzOOy1tWBCg” frameborder=”0″ allowfullscreen></iframe>

You may add a border round it by including inline type to the code like this:

<iframe style=”border: 3px solid #EEE;” width=”560″ height=”315″ src=”https://www.youtube.com/embed/qzOOy1tWBCg” frameborder=”0″ allowfullscreen></iframe>

Merely change the width of the border in addition to the colour, and also you’re achieved.

Whereas including an iframe border works, there’s truly a greater means so as to add a border round movies in WordPress. That’s by utilizing oEmbed.

Including Border Round oEmbed Movies in WordPress

WordPress comes with built-in oEmbed assist. Principally WordPress permits you to paste the hyperlink of the video, and it’ll routinely get the embed code for them. Now this solely works for oEmbed enabled websites similar to YouTube, Vimeo, DailyMotion, Hulu, and many others. (See: easy methods to simply add movies in WordPress utilizing oEmbed)

Now that you understand how so as to add a video with oEmbed, right here is how one can add a border round oEmbed movies in WordPress.

When including a video utilizing oEmbed, merely wrap the URL in span tag with inline type parameters, like this:

<span style="border:3px solid #EEE;">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

If you wish to add a identical border round all video iframes, then it might be finest so as to add a CSS class to your theme’s stylesheet.

1
2
3
.frame-border {
border:3px solid #EEE;
}

Now you should utilize the CSS class in your iframe embed code like this:

<iframe class=”frame-border” width=”560″ height=”315″ src=”https://www.youtube.com/embed/qzOOy1tWBCg” frameborder=”0″ allowfullscreen></iframe>

You may also use the identical CSS class within the span tag round your oEmbed video URLs, like this:

<span class="frame-border">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

The good thing about utilizing a single CSS class is that for those who change themes later, then you may simply change the colours with one click on vs going again and enhancing every video individually.

You May Also Like : How to Easily Create Short Amazon Affiliate Links in WordPress

We hope this text helped you add an iframe border round a video embed in WordPress. You might also need to see these 9 helpful YouTube ideas to boost your WordPress website with movies.

If you liked this article, make sure to hit the bell for getting our latest updates and share this article with your friends in every social media platforms.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

50 Best Online Jobs From Home For Students – Earn 20K PM

In latest years, the alternatives for online jobs from home for students have gained great reputation. This is as a result of many of the...

Best Answers to the Question “Why should you be hired for this Internship?”

What is the greatest approach to ace an internship interview? Especially for a more energizing who has by no means appeared for a job-related...

Does Instagram Notify You if Someone Screenshots Your Story?

When Snapchat first burst on the scene, there have been loads of individuals very completely happy concerning the prospect of sending pictures to people...

How to Change Background Color on Instagram Story

It's arduous for me to recollect Instagram earlier than the tales characteristic was launched — it is a simple possibility for sharing updates and...

Recent Comments