Copy link to clipboard
Copied
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!!
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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).
Copy link to clipboard
Copied
Did you try the HTML object code I posted 4 days ago?
Copy link to clipboard
Copied
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