My friends asking me about how they can embed iframe HTML on a blog post which appear full width and auto height. They consider using iframe because they are promoting URL via online advertising and they just want to show visitor the page from affiliate URL inside the iframe. In this post I will explain how you can too create full iframe inside your blog posts.
First thing you need to know why an iframe not showing full width and height on post, because your blog may contains css that sets to protect overflowing. Here's simple iframe you can try on your own blogs:
The absolute position let your HTML iframe floated on page with exact pixel position. By adding top and left 0, the iframe will appear exactly 0 pixel from top and left. And then width and height 100% will make it appear full on your page. Lastly, z-index makes it set above other elements. Just try your self.
The real demo iframe auto height and with is here.
Other method to show iframe auto full width and height is using jQuery. I will explain it in another post. Please subscribe for free updates :-)
First thing you need to know why an iframe not showing full width and height on post, because your blog may contains css that sets to protect overflowing. Here's simple iframe you can try on your own blogs:
<iframe src="your_url_here" style="position:absolute; top:0; left:0; width:100%; height:100%; z-index:1000" ></iframe>
The absolute position let your HTML iframe floated on page with exact pixel position. By adding top and left 0, the iframe will appear exactly 0 pixel from top and left. And then width and height 100% will make it appear full on your page. Lastly, z-index makes it set above other elements. Just try your self.
The real demo iframe auto height and with is here.
Other method to show iframe auto full width and height is using jQuery. I will explain it in another post. Please subscribe for free updates :-)
No comments :
Post a Comment