I was trying to embed youtube channel, and google maps into my webpage, and it worked but the problem was it worked well in desktop but didn’t fit into screen in small screens, I mean it wasn’t responsive.

So, I have found how to make embedded content with iframe responsive.

This is just simple. What you need to do is get the iframe code from any external source you would to embed and place it inside a div in your webpage.

For example , to place my youtube channel I would do something like:

<div class="abc">
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1AAOPRci5KHNIyPc4Fq8DHMGzaqQ" width="740" height="400">
</iframe>
</div>

here abc is my class name, you can give any. One more thing to do now, lets add some styling to this abc class in CSS file. So go to your CSS file and add this into your code. Replace “abc” with your class name.

.abc {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

Final step is to style the iframe. Add this to your stylesheet :

.abc iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

That’s all, it works!






Posts you might like


Solved - Reset Wordpress admin password no email, no phpmyadmin access

Didn't get reset email to change wordpress password? No access to phypadmin? Follow this one simple step to reset your wordpress admin password. read more

Solved - Website loading slow because of connecting to gc.kis.v2.scr.kaspersky-labs.com...

Because of some reasons, your website might be slower than it should be. Here is how to fix connecting to gc.kis.v2.scr.kaspersky-labs.com js request injection. read more

Blogging like a Hacker - Jekyll Tutorial

Learn to blog like hacker, Jekyll tutorials from basic installation to deployment, and more advanced stuffs too. read more

Configuring .np domain for Github page

Pointing .np domain to Github page website, Jekyll Website, gh-pages. register.mos.com.np doesn't allow you to add A records to point to Github so here is the most easiest way how... read more

Free website hosting with Github

Save your money and hassle by hosting your websites with Github, no any charges, you can host unlimited websites with high bandwidth. read more

Get a free .me domain with Github Student Developer Pack

Get a free .me domain name in easiest manner from Github Developer Pack. Also with this pack, you will be getting a lot of tools and freebies worthing so much.... read more