Extend the div container width based on iframe content - css

Question

How to allign the div to extend its width to match the size of iframe content.
Need to extend the parent div to match the content of iframe. if the content generated by the iframe is exceeding the width of the parent div, how to automatically expand the width of parent div???
CSS
#header {
background-color:#FFA500;
}
#container {
width:500px;
position:absolute;
left:200px;
vertical-align:center;
}
#mainContainer {
border:0px solid red;
height:auto;
}
#menu {
background-color:#FFD700;
height:auto;
width:100px;
float:left;
}
#content {
background-color:#EEEEEE;
height:auto;
width:400px;
float:left;
}
#footer {
background-color:#FFA500;
text-align:center;
clear:both;
}
.width-2 {
width: 500px;
}
.iframeContainer {
border:1px solid red;
width: auto;
}
.iframeContainer .embed-container iframe {
width: auto;
height:100%;
border:1px solid royalblue;
}
.width-auto .embed-container iframe {
width: auto;
}
.expected {
width: 400px;
background: green;
}
HTML
<div id="container" >
<div id="header" >
<h1 style="margin-bottom:0;"> Web Page</h1>
</div>
<div id="mainContainer">
<div id="menu" >
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript<br>
HTML<br>
CSS<br>
HTML<br>
CSS<br>
JavaScript<br>
HTML<br>
CSS<br>
HTML<br>
CSS<br>
JavaScript<br>
HTML<br>
CSS<br>
HTML<br>
CSS<br>
JavaScript<br>
HTML<br>
CSS<br>
HTML<br>
CSS<br>
JavaScript<br>
HTML<br>
CSS<br>
</div>
<div id="content">
Content goes here
<p>You might have seen floating content of web sites which is always visible on the page even if you scroll it. This is easy achieve thing by using just CSS. However there is also JavaScript alternative for this but the CSS one is smoother and faster as this doesn't includes any run time calculation. The below step by step process will guide to how to add a always visible div on web page.</p>
</div>
<div class="iframeContainer">
<div class="embed-container">
<iframe src="http://player.vimeo.com/video/30279492?title=0&byline=0&portrait=0" width="400" height="180" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div id="footer">
Copyright © W3Schools.com</div>
</div>

Answer 1

It depends on the relationship you have with this iframe.
If it is your own content hosted in the same domain as the parent, you can easily grab the contents using javascript (jQuery example): $("iframe").contents().find("#content").width()
If it is hosted under a different domain from the parent, you cannot access the content, but if you own the content, you can set up a communication channel between the iframe and the parent, using Window.postMessage(), so you can send the width value - https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
If it is not your own content, then you can't access it via iframe for obvious reasons - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript - Unless the content provider has an API to interact with the content, like Facebook does.