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!!
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
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
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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>
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