Dynamic Wrapper

On this page we show you the difference in using our Dynamic Wrapper in direct comparison with a normal iFrame element.

Module Settings

The options to configure the module are kept clear. Advanced styling options are possible via custom CSS classes for container or element.

Dynamic Wrapper Example

We have here a two column layout (one column on mobile devices). As you can see the Module takes 100% of the available width. Its height got dynamically calculated based on the ratio value that can be defined module settings.

Additionally, the breakpoint value (in pixels) can be used to define how the aspect ratio should be on small devices. This breakpoint is set at 960px in this example. If the window is wider than this 960px an aspect ratio of 16:9 is used for the iFrame. For smaller screens, an aspect ratio of 1.5:2

Sidenote: Rounded Borders are easily setted up by adding Custom CSS.

Change the window size to see how the module behaves.

iFrame Implemented with Dynamic Wrapper

And this is how a default iframe without Dynamic Wrapper looks

Same Scenario as above, but to be honest, without custom CSS you will not been able to set a width in percentage for iframes. So in this case we setup the iframe like so:

<iframe src="..." width="580" height="350" ></iframe>

But yeah if you now try to change the window size it want work. The iFrame got its fixed values.

Make the window so small that it corresponds to that of a smartphone, at the latest now you see the problem with iFrames clearly...

Default iFrame Implementation not Dynamic Wrapper

To be honest, yes there are ways to improve iframes by adding custom CSS rules, this is not magic but exactly how this module works...

Full Size Demo with Dynamic Wrapper

iFrame Implemented with Dynamic Wrapper