Highlighted

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

New Here ,
Jun 21, 2018

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!!

Most Valuable Participant
Correct answer by Ussnorway | Most Valuable Participant

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

Views

823

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Jun 21, 2018

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!!

Most Valuable Participant
Correct answer by Ussnorway | Most Valuable Participant

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

Views

824

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 21, 2018 0
Adobe Community Professional ,
Jun 21, 2018

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>

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 21, 2018 1
Adobe Community Professional ,
Jun 21, 2018

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.

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 21, 2018 0
Most Valuable Participant ,
Jun 22, 2018

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

https://adobe.ly/2KeW0rg

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 22, 2018 0
New Here ,
Jun 25, 2018

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).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2018 0
Adobe Community Professional ,
Jun 25, 2018

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2018 0
Most Valuable Participant ,
Jun 25, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 25, 2018 0