How to remove double scroll bars when embedding a page? - html

Question

There are a few questions on here similar to this one but their solutions don't seem to work for me. Basically I have embedded a page into a page on a website and am getting double scroll bars, one within the iframe and one in the page it is embedded in. What I would like is to do away with the scroll bar in the iframe and make it extend 100% of the iframe and only use the scroll bar in my page. So it would be hard to tell it is an embedded page. I am using Bootstrap's iframe embed class to keep the page responsive. If I need to do away with that class that's fine. Here is the html.
<div class="container">
<div class="main">
<div class="inner-main">
<h1>Page Heading</h1>
<div class="row">
<div class="col-lg-12">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="mylink"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
Is there a simple way to do this? The embedded page is rather long so I need it to push my page down all the way.
Here is what I ended up doing:
<iframe onload="scroll(0,0);" class="embed-responsive-item" src="mylink"></iframe>
CSS
.embed-responsive-16by9 {
height: 6060px;
}
iframe {
width: 100%;
display: block;
height: 6060px;
}
I will be on the lookout for a better way to do this

Answer 1

Edit: removed my other answer, I misread the question.
It is tough to do unless the iFrame and parent page on the same domain, something like this should work:
Resizing iframe to fit its content

Answer 2

your script will be if you are not using the contents from cross-domain
$('#iframe_id').load(function () {
$(this).height($(this).contents().height());
$(this).width($(this).contents().width());
});