Open the desired iframe in posts section


#1

I am trying to display news from another pages using iframe but it usually calls the whole page.
I tried clipping the iframe but it is tedious so I tried calling the exact div which i want in my post.
The code i used is working properly on jsfiddle.net but when i copy paste it in my post the output is not as desired.
The code i am using is as follows:

<style>
#outerdiv
{
   width:1050px;
   height:1970px;
   overflow:hidden;
   position:relative;
}

#inneriframe
{
   position:absolute;
   top:-250px;
   left:0px;
   width:1050px;
   height:1500px;
}
</style>

<div id="outerdiv">
    <iframe src="http://e.vnexpress.net/news/business/data-speaks/vietnam-s-fruit-and-vegetable-exports-grow-past-rice-3464797.html" id="inneriframe" scrolling="no"></iframe>
</div>

Also i have tried putting it in the “Insert Headers and footers” plugin, in header section as well as footer section. But now the iframe comes out to be blank.

I think i am making a silly mistake somewhere.
Please help.
Thanks.


#2

This goes outside the scope of these forums but if you share your website and there’s a quick fix I can notice, I’ll be happy to help. Iframe indeed grab the whole page.


#3

@vlad I am using Astrid theme and offline wordpress to edit it… How do I share my website here? As it is not live yet… I can share screenshots…


#4

Screenshots don’t help I’m afraid as I need to inspect the source code. Let me know once your site is live and I’ll be happy to check it out.


#5

Do you get the code which i had provided along with my question…
And have you check out that code in jsfiddle.net
I think jsfiddle may help you know what i exactly want…
When you will run this code you’ll see that the div gets cropped from the top… Cropping the head of the page which i called in iframe…That’s exactly what i want it to happen in my blog page too… @vlad

Can i screenshot you the inspect element code? @vlad


#6

I understand what you want to achieve with the code but I still need to check a live website where the issue is happening. There’s no way around this, sorry.


#7

It’s okay.
No problem.
Can i share a tunnel link with if you can check it and if you are online now so that i can activate the tunnel… @vlad


#8

Sorry, didn’t realize you want to add it in a post, I thought you wanted to create some custom section.
Doesn’t work for me at all in jsfiddle so I’m not sure exactly what you want to achieve, but I used your code in a post and the iframe starts from here and ends right after a pie chart about China.

I changed your widths to 100% and removed the space between CSS blocks. Otherwise WP tries to add a paragraph there and messes it up. You should also alter your heights as needed, what you have now seems pretty random.


#9

Oh yes…
Thanks alot @vlad