Is it possible to add javascript to ActivePresenter packages so that when I embed them in an iframe on a web page, they automatically change the height of the web page? Now you need to specify a fixed iframe height, for example: 100% width and 600px heights. But this is inconvenient for responsive design: ActivePresenter has a scrollbar on the right.
In some other development tools (such as Tumult Hype and H5P) there is a javascript that is added when iframe is inserted, that changes the page height. Example:
For a non-responsive project, you can set the aspect-ratio CSS property for the iframe so that its height is updated automatically based on its width to keep the aspect ratio.
If it’s not what you expect, you can also use the scripting method of responsive projects for non-responsive projects as mentioned below.
For a responsive project, the best content size depends on the content itself. So you need to add script to your project to calculate the best size and notify the iframe to resize to that size.
You can see this sample project: iframe-auto-resize.zip (226.1 KB)
In this sample project, a function to get the best content height (for the current content width) and notify the iframe is defined in the project On Load event, and is called when the iframe changes its width.
The best content size may change when changing the slide, so you’ll also need to call this function in the master slide On Load event and in the Resume Feedback layer On Load event (this feedback layer will appear when revisiting the page, before showing any slide).
It’s not possible to calculate the best size automatically for any content so you may need to update getBestHeightForWidthManually(width) function for your own project.
If the main page and the embedded HTML5 page are hosted on different domains, you also need to add the following script to the main page. It’ll listen to the resize request from the embedded content to resize the iframe:
window.addEventListener('message', function(e) {
var data = e.data;
var iframes = document.getElementsByTagName('iframe');
for (var iframe of iframes) {
if (iframe.contentWindow == e.source && data.context == 'AtomiAP' && data.message == 'resizeIframe') {
iframe.style.height = data.iframeHeight + 'px';
break;
}
}
});
Hello Toan,
Thanks for the answer. This is what I’m looking for.
However, some questions arise. In particular, I’m confused by the double scrollbar: one is from the ActivePresenter player, the other is from the browser. Is it possible to completely abandon the ActivePresenter scrollbar? I want to use only the standard browser scrollbar.
It depends on your slide settings and content.
If the slide is set to a specific height (custom or 100% layout height) and the slide objects overflow that height, it’s not possible to extend the slide height to include overflowed objects.
If the slide height is 100% device height, and overflowed objects are flex childrens or have fixed sizes and positions (in px unit).
I guess that the blue object in your screenshot has its size and position in %, so it’s not possible to remove the scrollbar. For example if its position is 110%, it’ll always overflow with any slide height.
Thanks for the answer, I understand that the scrollbar is needed. But if we use an iframe with auto-height, then why can’t scrolling inside the iframe be disabled if there is a common scrollbar for the page? The main problem is two scrollbars.
No way with content like this.
Whenever you increase the iframe height, the object top position is increased accordingly.
If you don’t wan’t to see the scrollbar you must adjust the object settings as mentioned in my previous answer.
