How to embed url of your website using iframe tag?Youtube,facebook and posts URL.

Hello readers here we are back with a new article. Hope you are gaining information from our blog. Explore all the contents and we need your support.

To make your blog or website more user-friendly and attractive you probably need to embed URL's for proper explanation of your content. Embeding other websites adds new features to your blog.

Consider for example your blog does not come with a feature to run HTML and CSS codes but codepen.io  website has features to run these so if u write these codes in the website and embed it to your website, users who visit can see the result of running the code and allow user's to edit it.

Another example is if you need to promote article of your blog and you made a Youtube video on it. If you provide the link for your video, the user need to go to youtube to see your video but if u embed that they can watch it in your own article itself.

Yes!! It is possible you can emebed them using a HTML tag <iframe>

You may like this:

• What to do when contact form is not working in Blogger?
• How to convert horizontal navbar(menu) into dropdown in mobile view?

How to use <iframe> tag?

<iframe> is a HTML tag which allows you to embed URL's in your website. In writing the code for <iframe>  you need to specify the link to whatever you are willing to embed using attribute 'src=' . Where you should enter the link after it.

In this article i will embed few of the social media links and show you the demo.

Syntax:

<iframe src="link you want to embed" title="title"></iframe>

You can customize the appearance of the iframe also. If you want the frame full width along the length of your post. use this syntax below.

<iframe src="link you want to embed" title="title" width=100% height=300></iframe>

I have given example by embeding one of my blog's post.

You can put a black border by the below code:

<iframe src="https://riseprogramming.blogspot.com/2020/08/code-box-with-copy-button-using-html_5.html" title="baba" width=300 height=300 style="border: 1px solid black;"></iframe>

Demo:

How to embed Youtube?

Get the link of your video and copy the text present after "youtube.com" or "youtube.me". 

Example: In "https://youtu.be/q80t4VtBScE" copy "q80t4VtBScE" and use the below code

<iframe src="https://www.youtube.com/embed/q80t4VtBScE" title="baba" width=500 height=300 style="border: 1px solid black;"></iframe>

Demo:

How to embed facebook?

Go to the post you want to embed and click 3 dots on top right corner and lick embed and copy the code in iframe section. 

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FProgrammingRise%2Fposts%2F136321291473395&show_text=true&width=552&height=483&appId" width="552" height="483" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

Demo:

Stay tuned for many more articles.

Thanks for reading.