How to Automatically Resize an iFrame (Using iFrameResize.js)

In this video you will learn how to automatically resize those ugly iFrames using a Javascript library called iFrameResize.
Download iFrameResize here: github.com/davidjbradshaw/ifr...
Download my code: gist.github.com/brickbones/86...
If you like my videos and want to support the channel, you can buy me beer: www.buymeacoffee.com/ieatwebs...
Contact me: / ieatwebsites

[@sahilkumarsahoo529]

i've been looking for this all week. thanks so much

[@ourfamilygarden]

This was super-helpful! Thanks for breaking it down into easy-to-follow steps.

[@byben123]

Thank you so much for this video. Absolutely useful guide to set dynamic iFrame! :)

[@jimjin235]

I've been looking for this for several weeks, finally!!!!! Thank you soooooo much!!!!!

[@ieatwebsites]

You welcome!

[@marufsarkar8098]

I am trying to do something with conditional form.. its okay of first load but when new fields appear conditionally height not increasing. Is there any solution for this ?
Thanks

[@artcromediadesgin2592]

can we have another sample, src from other website ( mean loan different domain website in ). can make it auto adjust height base on that page content ?

[@glhn]

Hello, thank you for tutorial! I have two question: first, you mentioned that users need spesific javascript in that page and that's the only way to run the library. That means it isn't gonna work in a wordpress website?

[@Constantinesis]

Hello! I am using Wix. Could you tell me how can I add and embedd the script into my website usign their platform?

[@rangabharath4253]

awesome as always

[@ieatwebsites]

Thank you Ranga!

[@stilltiger]

thank you so much

[@fernandorojo6311]

Huge, thanks.

[@ieatwebsites]

You welcome!

[@ashrafulislam9234]

I downloaded your code but i don't see any form.html, Resizer.min.js, styles.css file and so on.

[@user-py2ex8zg1t]

How can I do it on WordPress. Can You suggest?

[@mashenko_d]

thank you

[@sportsclipsasia]

Any video/code on how to print contents?

[@maarten119]

i have the problem that its resizing to height: 1px???

[@jenniferward6821]

Thank you so much

[@ieatwebsites]

You welcome!

[@SladeGorman]

is there a way to do this on shopify?

[@Buyfave]

How about if i want to have different (domain) website in ? Thanks, WebJek

[@marcelo.victor]

Just use postMessage with all origins (*) and event listener to receive the message and you are all set.

[@Kolarian666]

Thanks

[@raghu8898]

How to show another domain url in

[@user-zz4jo1ui4c]

I will save some time for people working with this cross domain, it didn't work for me when placing the JS files in the project, it only worked with CDNs so if you encounter issues cross domains this could be the issue.

[@marcelo.victor]

Just use postMessage with all origins (*) and event listener to receive the message and you are all set.

[@erichepperlewp]

This doesn't do what I need it to -- auto-resize embeds from other sites -- but I thumbs upped it anyway because it is still good information

[@XeiDaMoKaFE]

4:25 but if the whole point of you writing a js is to load it in the web page , can't you load the resize .js file to the external website for it to be able to use it

[@XeiDaMoKaFE]

don't you just need to append the resize.js file into the external website html

[@abuzakariamusic]

I tried but didn't work me, 100% width is coming but height not coming as you one!
I did accordingly to your video and cross check many times

[@santabaia]

hi, is that possible to insert in a wordpress page?

[@ieatwebsites]

Is possible!

[@user-py2ex8zg1t]

How can I do it on WordPress? Can You suggest?

[@Wanttono]

Don't we have an Install and Forget 'responsive plugin' that will fix all past and future s on your website automatically placing above and below the thousands of previous s on your website?
Plus this in your CSS = .-container{ position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .-container { position: absolute; top:0; left: 0; width: 100%; height: 100%; }

[@jeetudey]

After using this with CDNs I encountered Cross domain issue and I fixed that by setting the option checkOrigin: false. However it is setting the frame height to 0px. Not sure why.
[iFrameSizer][Host page: frmain] Checking height is in range 0-Infinity
Resizer.js:144 [iFrameSizer][Host page: frmain] Checking width is in range 0-Infinity
Resizer.js:144 [iFrameSizer][Host page: frmain] IFrame (frmain) height set to 0px

[@marcelo.victor]

Just use postMessage with all origins (*) and event listener to receive the message and you are all set.
Or you could use the taggedelement to set the height.

[@alexnim4873]

i've been looking for this all week. thanks so much

[@ieatwebsites]

You welcome! 😀

[@funforeveryone1366]

Don't we have an Install and Forget 'responsive plugin' that will fix all past and future s on your website automatically placing above and below the thousands of previous s on your website?
Plus this in your CSS = .-container{ position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .-container { position: absolute; top:0; left: 0; width: 100%; height: 100%; }