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

Report · Jun 21, 2018

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

Report · Jun 21, 2018

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.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 16, 2022

Hi Nancy - thanks for this solution, I tried it and it works great for a little test animation I'm doing. Is there anyway to set a max-height for the wrapper? I have tried it using max-height: but doesn't seem to do much. I have an html canvas animation in my iframe, and don't want the iframe getting taller than the animation. link below. many thanks. steve

http://iamsteve.co.uk/test1/

Report · Apr 16, 2022

@sdm038,

You must start with a responsive animation. Currently your <canvas> is fixed-width = 900px which won't fit most devices above or below that pixel value.

https://blog.adobe.com/en/publish/2016/08/11/creating-html5-ads-with-animate-cc-responsive-canvas-sc...

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 17, 2022

Hi Nancy, thanks for replying. Very much appreciated. The animation is responsive, although I have not checked the 'scale to fit' checkbox as I don't want the animation to completely fill the browser window on larger screens. So currently it does scale if you make the browser smaller, but remains 900px wide when the browser is full screen. This is just a test and I will probably have the animation slightly larger, but don't want it filling the screen on hd screens. The problem is the iframe continues to scale. Is there anyway to stop this? Thanks. Steve

Report · Apr 17, 2022

Muse is end of life since 2018 when Adobe discontinued it. Muse is unsupported outdated software that is no longer fit for use.

I suggest you use Dreamweaver instead of Muse. You'll have more control of your code and be able to embed the animation directly into your HTML document without using an <iframe>.

Responsive <canvas> can be wrapped inside a parent <div> tag styled with CSS that constrains it's width on small & large devices.

By way of an example with Bootstrap responsive framework:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<h1>Dreamweaver with Bootstrap 4</h1>

<div class="col-md-6 mx-auto">
<h3>Animation goes here</h3>
  <canvas>

  </canvas>
</div>

<!--Supporting scripts here, first jQuery, then Popper, then Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jun 21, 2018

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jun 22, 2018

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

Report · Jun 25, 2018

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

Report · Jun 25, 2018

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

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Jun 25, 2018

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

Adobe Community

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

1 Correct answer