I'm using TYPO3 7.6 with fluid styled content and I've allowed my editor to insert an iframe into the Rich Text Editor (RTE or htmlarea). The iframe is shown, because of this Snippet. That's fine.
Now I want to wrap this iframe with typoscript, because the iframe must be responsive, so I need sth. like that, as a wrapper:
<div class="embed-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/7DRU" frameborder="0" allowfullscreen></iframe>
</div>
CSS
.embed-container {
position: relative;
padding-bottom: 56.25%; /* ratio 16x9 */
height: 0;
overflow: hidden;
width: 100%;
height: auto;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
How can I wrap the iframefrom TYPO3-RTE with some HTML-Code?
I've tried sth. like this ... but it doesn't work.
### wrap iframe at RTE
lib.parseFunc_RTE {
externalBlocks := addToList(iframe)
externalBlocks {
iframe.stripNL = 1
iframe.callRecursive = 1
iframe.callRecursive.tagStdWrap.HTMLparser = 1
iframe.callRecursive.tagStdWrap.HTMLparser.tags.iframe {
fixAttrib.class.default = classOfiframe
wrap = <div>|</div>
}
}
}
or
lib.parseFunc_RTE.tags.iframe = TEXT
lib.parseFunc_RTE.tags.iframe {
wrap = <div class="test">|</div>
}
Security side-note
Allowing your editors to hand-craft HTML raises the chance that your website is compromised by XSS (cross-site-scripting). It's not suggested to allow direct HTML input, especially if you cannot fully trust your editors.
TypoScript adjustments
You're TypoScript was almost fine, only the levels where you applied the properties were wrong.
The following example puts the question in a whole picture. The part in the beginning is basically solved by fetching content elements - in this regard it initializes the state to be parsed. Only the lib.parseFunce_RTE adjustments are required in your scenario.
# Simulating some content
page = PAGE
page.10 = TEXT
page.10.value (
<p>Before</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7DRU" frameborder="0" allowfullscreen></iframe>
<p>After</p>
<main>Not parsed...</main>
)
page.10.parseFunc =< lib.parseFunc_RTE
# Adjusting parsing instructions for IFRAMES
lib.parseFunc_RTE {
allowedTags := addToList(iframe)
externalBlocks := addToList(iframe)
externalBlocks {
iframe.stripNL = 1
iframe.stdWrap.wrap = <div class="frame-wrapper">|</div>
}
}
Generated output
This produces the following output - it's expected that the <main> tag is encoded, because it's not defined to be handled. A nonTypoTagStdWrap.HTMLparser statement is responsible for this encoding of non-matched tags.
<p class="bodytext">Before</p>
<div class="frame-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/7DRU" frameborder="0" allowfullscreen></iframe>
</div>
<p class="bodytext">After</p>
<p class="bodytext"> <main>Not parsed...</main></p>
Find more details in the parseFuncTypoScript reference
Related
with Google Drive you may embed videos in your website with the tag:
<**iframe src="https://drive.google.com**/file/d/LINKTOMYFILE/preview" width="640" height="480" frameborder="0" scrolling="no" seamless></iframe>
on the Top Right there is a Gray Box. This takes you to the download / embedding GoogleDrive page. I'd like to stop that.
Anyone one knows how to hide it?
Or at least how to mask it with a customs CSS?
this is what I get by inspecting the element in the div:
<div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;">
<div class="drive-viewer-icon drive-viewer-nav-icon">
</div></div>
Thank you Thomas! Good Idea!
The following does the job for me.
The pop-out is not hidden (it hides itself after few seconds) but it stays inaccessible.
I think it is the least ugly solution.
<div style="width: 640px; height: 480px; position: relative;">
<iframe src="https://drive.google.com/file/d/LINKTOMYFILE/preview" width="640" height="480" frameborder="0" scrolling="no" seamless=""></iframe>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div>
</div>
PS
The "opacity: 0" is a workaround for Mozilla
You can also masking the pop-out button with whatever image you like using above code. Make sure the size of the masking image is 48x48 pixel and transparent background. Here is the modified version of the code.
<div style="width: 640px; height: 480px; position: relative;">
<iframe src="https://drive.google.com/file/d/1MfhMdv4mw_20UWENUSt1PzmU7IQVpCXf/preview" width="640" height="360" allow="fullscreen" frameborder="0" scrolling="no" seamless="">
</iframe>
<div style="width: 48px; height: 48px; position: absolute; right: 6px; top: 6px;">
<img src="https://i.ibb.co/bJNBHXp/guitar-1.png">
</div>
</div>
It should be like this. I hope it's working.
<div style="width: 640px; height: 480px; position: relative;">
<iframe src="https://drive.google.com/file/d/0BxLbnVHP6GWpV2ZIZEc4SkNTOTQ/preview" width="640" height="480" frameborder="0" scrolling="no" seamless=""></iframe>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div>
</div>
You can't prevent it from popping out as that's something Google implemented. You also can't change the button normally as it's Google's page and you can't modify it.
You can't "reach" into the page loaded by an iframe and modify it, unless you have cross-site scripting enabled on the child page (google's page), and Google would never allow that for security reasons. If that would be able I could serve people a Google Drive page but for example modify the download button to download malware.
The only solution would be to place a div over the iframe, on top of the button. But still, it's not really pretty and usually frowned upon. Google offers the service for free so they determine how people use it.
If you run the example below, look at the red box at the top right corner.
Something like:
.hidebtn {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #FFF;
background: #FF0000;
position: absolute;
right: 50px;
top: 50px;
}
<div class="hidebtn">button</div>
<iframe src="https://www.example.com" frameborder="0" width="100%" height="500"></iframe>
For me the answer by u32i64/asd worked well to stop the icon being clickable. To get rid of the black bars too i changed the code to this:
<div class="responsive-container">
<iframe src="https://drive.google.com/file/d/1Fy4AwZZVF-DLAenTSxQl93icdXfef/preview" frameborder="0" scrolling="no" seamless=""></iframe>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div>
Make sure the http address ends with 'PREVIEW')
Important You have to add this to your 'additional CSS':
.responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.responsive-container iframe, .responsive-container object, .responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
A simple option is to avoid popups using sandbox parameter and allowing just options that need google drive to reproduce the video:
<iframe src="https://drive.goo..." sandbox="allow-same-origin allow-scripts"></iframe>
It doesn't hide the button, but it prevents the iframe to popup a new window so the button becomes useless.
Thanks s1h4d0, It worked for me, maybe in terms of programming it is not the best, but it works and I thank you.
.hidebtn {
width: 60px;
height: 60px;
position: absolute;
right: 5px;
top: 5px;
background: #000000; /*remove this if you want to put only the logo.*/
}
<iframe src="https://drive.google.com/file/d/1O71QlISu_yRvT5Q1_h3S8OHocjgpuhIx/preview" frameborder="0" width="100%" height="500"></iframe><div class="hidebtn"><img src="https://mungowarez.net/wp-content/uploads/2020/10/44918-O48GVC-01-2.png"></div>
If the above code doesn't work, add the inside the div and then add the image, do it like this:
.hidebtn {
width: 60px;
height: 60px;
position: absolute;
right: 5px;
top: 5px;
background: #000000; /*remove this if you want to put only the logo.*/
}
<div class="hidebtn"><iframe src="https://drive.google.com/file/d/1O71QlISu_yRvT5Q1_h3S8OHocjgpuhIx/preview" frameborder="0" width="100%" height="500"></iframe><img src="https://mungowarez.net/wp-content/uploads/2020/10/44918-O48GVC-01-2.png"></div>
I figured it out. Change the drive.google.com in the URL to googledrive.com and some other changes:
Get the unique video identifier (0B6VvIWR7judDX25yUGxVNERWUj)
Put into this html:
<body oncontextmenu="return false;">
<video src="http://googledrive.com/host/0B6VvIWR7judDX25yUGxVNERWUj" controls width="100%" height="auto"></video>
</body>
The "body oncontectmenu" simply removes the ability to right-click anything on the screen, because without this you can right click the video and download the file. Of course the right click ability is removed from the whole page and people can still find the file by inspecting the page source.
<div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;">
<div class="drive-viewer-icon drive-viewer-nav-icon">
</div></div>
There is a more simple method of blocking the pop-out on googledrive video's and docs,
Wherever you are placing the html,inline frame or lightbox on your website page, insert a rectangular shape and place it over where you want to block the pop-out.
Next- click on the shape to get it's properties, there you should find a number of options
clear all the other options, unless you want to insert your own link or logo, make the the shape transparent, if you have the option of showing a border line I would advise keeping this to 1 setting until you have covered the position of the pop-out, once you have found the correct position, remove the border line and lock it in place. this works as I have used this method many times to block out links that appear on video's and documents, it is simple and does not require the use of any code. This method will only work if you have set the dimensions of your document or video, once you done all that test your video or document, you will find that the icon still appears but unable to click on it. you can use this method to stop the user gaining access to your information or a third party website which takes them away from your page. this method can also be used for preventing someone right clicking over your video or documents and photographs, if they try to copy it, a black box is all they will get. however,you may still get the info from elements/source code.
I tried the previous suggestions and they did not work because "Google Drive refused to connect".
I came up with a completely different approach to solve the original problem (to avoid "download / embedding GoogleDrive page"), which is very simple:
Create a Google Slides presentation, insert in a slide the video you have in Google Drive.
Select File - Publish to the web - Embed, and copy the code that is generated.
In Google Sites, select Embed - Embeded code, and paste it there.
This solution provides also more options that you control in Slides for the videos, such as automatic playing, select timing of the video, etc.
<div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;">
<div class="drive-viewer-icon drive-viewer-nav-icon">
</div></div>
Mano Souza · RIO DE PEDRAS.hmtl
I have a second page that is populated using data from an Ajax call on the home page. The header on this dynamically generated page is missing all its JQuery styling, and I suspect the two are related. This is my HTML for the page being generated:
<div data-role="page" id="breakdownDialog" data-add-back-btn="true">
<div data-role="header" id="cvResultsDialog">
<h3></h3>
<span></span>
</div>
<div data-role="content" id="dialogContent">
</div>
</div>
There is also some CSS styling I have used, which I think needs streamlining, but I don't think is causing the problem. This is because when I comment out this code the header is still missing the styling:
#cvResultsDialog {
width:100%;
text-justify: distribute-all-lines;
}
#cvResultsDialog:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}
#cvResultsDialog > h3 {
display: inline-block;
display:inline;
text-align="left";
}
#cvResultsDialog span {
display: inline-block;
vertical-align: baseline;
text-align="right";
}
I then populate the header (and the page) using the response from an Ajax call from the previous page. The page is populated on the click of a button (#resultsList) linking to this page:
$('#resultsList').on('click', '#cvResults', function() {
//find previous result that matches the filename on the link.
for(var i=0;i<storedResponses.length;i++){
var currentTitle=storedResponses[i].title;
var textClicked=$("h3",this).text();
if(currentTitle===textClicked){
currentResult=storedResponses[i];
}
}
$('#cvResultsDialog h3').text(currentResult.title);
$('#cvResultsDialog span').text(currentResult.percentage);
//this last bit is populating the page, so is irrelevant for this question
$('#dialogContent').empty();
for(var i=0; i<currentResult.profile_json.length; i++){
$('#dialogContent').append(
'<table cellpadding="0" cellspacing ="0" width="100%" style="border: 4px solid transparent;"><tr id="'+
currentResult.profile_json[i].title+'"><td>'+
currentResult.profile_json[i].id+'</td><td align="right">'+
currentResult.profile_json[i].value+'</td></tr>'
);
}
});
Finally here is a picture of the header. You'll notice it doesn't have the JQuery Mobile styling and the back button is missing.
Thanks all!
To get the back button, you need to apply the data-add-back-btn="true" to the header div not the page div.
<div data-role="header" id="cvResultsDialog" data-add-back-btn="true">
Working DEMO
Other than that the header looks correct given the CSS styling you are applying... Perhaps you can tell us how you want the header to be arranged?
I am creating a grid like layout of articles and videos for my home page. I want all boxes to be the same dimensions including the video ones, but i have some questions about adding youtube videos to my site.
question 0: I herd HTML 5 supports video but I am considering embedding YouTube videos as most of my videos are from YouTube and I herd that HTML5 video isnt supported well enough? Should I consider HTML5 video?
question 1: Considering YouTube videos, how do I add YouTube videos into my HTML and CSS?
question 2: How can I make sure that the video fits inside my markup and not any smaller or bigger.
question 3: How can I also make sure that the user can have access to the same video controls thar YouTube provides, eg fullscreen, play, ect.....
I will also take any advice on my HTML and CSS.
Heres the HTML for the grid like articles and videos for my site:
<div class="modules-container">
<h3 id="on-god">On God</h3>
<div class="row clear-fix">
<section class="article-module">
<header>
<h4>
Article Name
</h4>
</header>
<blockquote cite="articles/name">
<p>
<em>My example quote will go here</em>
</p>
</blockquote>
<footer class="article-module-footer">
Read More
</footer>
</section><!-- end .article-module -->
<section class="article-module middle">
<header>
<h4>
Article Name
</h4>
</header>
<blockquote cite="articles/name">
<p>
<em>My example quote will go here</em>
</p>
</blockquote>
<footer class="article-module-footer">
Read More
</footer>
</section><!-- end .article-module -->
<section class="article-module">
<header>
<h4>
Article Name
</h4>
</header>
<blockquote cite="articles/name">
<p>
<em>My example quote will go here</em>
</p>
</blockquote>
<footer class="article-module-footer">
Read More
</footer>
</section><!-- end .article-module -->
</div><!-- end .row -->
<hr>
<h3 id="videos">Videos</h3>
<div class="row clear-fix">
<section class="video-module">
<h4>
Name of video
</h4>
<p>
My embeded video will go here
</p>
</section><!-- end .video-module -->
<section class="video-module">
<h4>
Name of video
</h4>
<p>
My embeded video will go here
</p>
</section><!-- end .video-module -->
<section class="video-module">
<h4>
Name of video
</h4>
<p>
My embeded video will go here
</p>
</section><!-- end .video-module -->
</div><!-- end .moduels-container -->
</div>
And my CSS thus far. I should note Im using normalize.css in another file.
/*
Author: David Espejo
*/
/* rem is base off of root font size */
/*
Padding and borders are
included in the width
of all elements
*/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Small screens (default) */
html { font-size: 100%; } /* root font size 16px */
/* Medium screens (640px) */
#media (min-width: 40rem) {
html { font-size: 112%; } /* root font size 17.92px */
}
/* Large screens (1024px) */
#media (min-width: 64rem) {
html { font-size: 120%; } /* root font size 19.2px */
.article-module, .video-module {
float: left;
width: 30%;
padding: 0.3rem 0.5rem;
}
.article-module.middle, .video-module.middle { margin: 0 5%; }
}
.container {
margin: 0 auto;
max-width: 48rem; /* not > (48 * 19.2 = 921.6px)! */
width: 90%; /* when < 921.6px */
}
.row { border: 1px solid blue; }
.article-module, .video-module { border: 1px solid red; }
.clear-fix:after {
content: " ";
display: block;
clear: left;
}
Answer 0: I would suggest to go with embedded videos since you are mostly using youtube videos. That way you wont have to worry about the controls for the video.
Answer 1: You can take the embed code provided by the youtube and drop it anywhere you want to in your HTML.
<iframe width="560" height="315" src="//www.youtube.com/embed/PKa6XdWat2s" frameborder="0" allowfullscreen></iframe>
In your case this iframe tag would go wherever you have mentioned "My embeded video will go here"
I would also suggest using a div tag instead of p to contain the videos. As far as I know p tag is used for paragraphs of text.
Answer 2: You can make sure the video fits inside your grid by controlling the width and height of the iframe tag from the stylesheet.
Something like this.
.iframe {
width:100%;
height:100%;
}
By doing this the video size will be the size of the containing div.
Answer 3: As I mentioned above the controls should already be there for you.
fiddle link : http://jsfiddle.net/6vh2t/1/
Your HTML looks pretty good. I'd maybe use <article> rather than <section>, that seems to be more appropriate.
You can get the embed code for any video by clicking share then embed. Youtube used to use <object> but now it seems to be <iframe>, e.g.
<iframe width="560" height="315" src="//www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
You can set the width and height (in pixels). Check the documentation to see about controls.
https://developers.google.com/youtube/player_parameters
Good luck. Cheers!
For youtube videos you can insert them as an iframe, like this:
<iframe width="420" height="315" src="//www.youtube.com/embed/fvdmISdytXg" frameborder="0" allowfullscreen></iframe>
Where src is the source of the video, also you can customize the width and height.
I am trying to align YouTube embedded video in the center of the page in my bootstrap page. The size of the video is always the same.
My html looks really simple:
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>
I tried different solutions from stackoverflow (which addressed just centering a div, not a video) and the best I was able to came up with was this fiddle.
I already tried solution1, solution2, solution3 but with no result. Another partially successful solution was to use:
width: 50%;
margin: 0 auto;
It worked nicely on desktop, but failed on iPad or a phone (the video went partially outside of a screen). How is it possible to center the video properly in desktop/tablet/phone?
An important thing to note / "Bootstrap" is just a bunch of CSS rules
a fiddle
HTML
<div class="your-centered-div">
<img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" />
</div>
CSS
/* key stuff */
.your-centered-div {
width: 560px; /* you have to have a size or this method doesn't work */
height: 315px; /* think about making these max-width instead - might give you some more responsiveness */
position: absolute; /* positions out of the flow, but according to the nearest parent */
top: 0; right: 0; /* confuse it i guess */
bottom: 0; left: 0;
margin: auto; /* make em equal */
}
Fully working jsFiddle is here.
EDIT
I mostly use this these days:
straight CSS
.centered-thing {
position: absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
if your use stylus/mixins ( you should... it's the best )
center-center()
absolute()
margin auto
top 50%
left 50%
transform translate(-50%,-50%)
This way... you don't need to know the size of the element - and the translate is based of it's size - So, -50% of itself. Neat.
Youtube uses iframe.
You can simply set it to:
iframe {
display: block;
margin: 0 auto;
}
<iframe style="display: block; margin: auto;" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>
You dont have to put <iframe> in a parent div at all. You can target exactly youtube iframe with CSS/3:
iframe[src*="//youtube.com/"], iframe[src*="//www.youtube.com/"] {
display: block;
margin: 0 auto;
}
I set the max width for my video to be 100%. On phones the video automatically fits the width of the screen. Since the embedded video is only 560px wide, I just added a 10% left-margin to the iframe, and put a "0" back in for the margin for the mobile CSS (to allow the full width view). I did't want to bother putting a div around every video...
Desktop CSS:
iframe {
margin-left: 10%;
}
Mobile CSS:
iframe {
margin-left: 0;
}
Worked perfect for my blog (Botanical Amy).
Using Bootstrap's built in .center-block class, which sets margin left and right to auto:
<iframe class="center-block" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
Or using the built in .text-center class, which sets text-align: center:
<div class="text-center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>
<div>
<iframe id="myFrame" src="https://player.vimeo.com/video/12345678?autoplay=1" width="640" height="360" frameborder="0" allowfullscreen> .
</iframe>
</div>
<script>
function myFunction() {
var wscreen = window.innerWidth;
var hscreen = window.innerHeight;
document.getElementById("myFrame").width = wscreen ;
document.getElementById("myFrame").height = hscreen ;
}
myFunction();
window.addEventListener('resize', function(){ myFunction(); });
</script>
this works on Vimeo adding an id myFrame to the iframe
make iframe with align="middle" and put it in paragraph with style="text-aling:center":
<p style="text-align:center;">
<iframe width="420" height="315" align="middle" src="https://www.youtube.com/embed/YOURVIDEO">
</iframe>
</p>
For a fully responsive IFramed YouTube video, try this:
<div class="blogwidevideo">
<iframe width="854" height="480" style="margin: auto;" src="https://www.youtube-nocookie.com/embed/h5ag-3nnenc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
.blogwidevideo {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.blogwidevideo iframe {
left:10%; //centers for the 80% width - not needed if width is 100%
top:0;
height:80%; //change to 100% if going full width
width:80%;
position:absolute;
}
<center><div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div></center>
It seems to work, is this all you were asking for? I guess you could go about taking longer more involved routes, but this seemed simple enough.
The easiest way is by adding tag, before , open the tag and then close it after closing . As said by others tag is not supported by HTML5, and even your ide would show an error. I'm using VS Code and yes it shows an error, but if you check your website the video would be in the center. Youtube still understands the tag :)
I try to get the height of an element that is in a iframe and that iframe is in a div with display: none. I need the height in the document in the iframe, not outside. So you don't have to think about security constrains.
Edit: Here is a small fiddle to demostrate the problem: http://jsfiddle.net/bv5JH/1/. console will log 0. And I am not able to append the div#myelement (or a copy of it) to some visible elements (so that it will be rendered and I can get the height like in the following "solution").
I found some solutions like:
var copied_elem = $("#myelement").clone()
.attr("id", false)
.css({visibility:"hidden", display:"block",
position:"absolute"});
$("body").append(copied_elem);
var height = copied_elem.height();
var width = copied_elem.width();
copied_elem.remove();
That will work if the element itself is display:none. But I dont have any displayed elements at all in the iframe, so I can't append it to a displayed element.
Any idea how to get the height anyway?
Since you seem to have an interaction set up between the IFRAME and your content, it should not be hard to apply this to the IFRAME itself:
position: absolute;
display: block;
top: -999999;
left: -999999;
Then you should be able to get dimensions of your element inside the IFRAME and once you got that, return that IFRAME back to its original position by resetting those styles.
duo to I have no enough reputation to commit.so i say here.
Change iframe's position is a good idea,yeah.
the image blow is my code which is a tab.
<div class="table census-table">
<div class="census-table-list">
<iframe src="census-baseData-iframe.php" frameborder="0" scrolling="no" width="950" 1height="590" style=""></iframe>
<iframe src="census-activeUser-iframe.php" frameborder="0" scrolling="no" width="950" 1height="590" style="display: none;"></iframe>
<iframe src="census-userKeep-iframe.php" frameborder="0" scrolling="no" width="950" 1height="590" style="display: none;"></iframe>
iframe src="census-userPay-iframe.php" frameborder="0" scrolling="no" width="950" 1height="590" style="display: none;"></iframe>
</div>
</div>