Looking for a responsive iframe widget or code that also spans the height of webpage

[Snowbound Cam]

Hey all!  I'm looking for widget, or code, for a responsive iframe that is responsive in both width AND height, but with the height spanning the full height of the page contents without covering up the page header or the sticky footer.  The only options I've found either don't have responsive height (responsive width only), or if they do have responsive height they cover the full height of the webpage, including overlaying the header and sticky footer which I need to not happen. I still need the header and sticky footer visible.  Is there a responsive iframe widget or option out there for this?  Thanks!!

[Nancy OShea]

This is just one of the many drawbacks with <iframes>  Best to not use them if you can possibly avoid it.

But let's say you have a YouTube video embed .  The idea here is to wrap an absolutely positioned <iframe> inside a relatively positioned  parent <div>.  See code below.

<div class="wrapper" style="position:relative; overflow: hidden; padding-top: 56.25%;">
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" src="https://www.youtube.com/embed/dQw4w9WgXcQ" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
</div>

[Nancy OShea]

Sorry, my browser is having major problems with this forum right now.

Picking up from before, assuming your header and footer are not positioned, it should look something like this.

[Ussnorway]

i agree that iframes bring their own issues however sometimes they solve a problem that other types of code can't and I use this custom widget iframe (made by Pavel) when I need a responsive one

https://adobe.ly/2KeW0rg

[Snowbound Cam]

I tried using that widget by Pavel Homeriki and it works fantastically for responsive full page height, but it doesn't seem to be responsive in width.  I need a widget that provides an iframe that is full page height responsive just like Pavel's widget but is also width responsive (not full page width).

[Nancy OShea]

Did you try the HTML object code I posted 4 days ago?

[Ussnorway · Accepted solution]

I don't understand what you think is "width responsive" behavior then

would need to see your design and that = a .muse file... just the iframe page and what ever page goes inside it will do i.e, not the entire 80 page site

save it as a new site with just those things needed to see the layout issue and put the .muse file into a dropbox | library with a url link so we can see what you are tring to make