Dynamic Wrapper Examples

On this page we show you the difference in using NXD Dynamic Wrapper in direct comparison with a normal iFrame 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.

Try it yourself

Change the window size to see how the module behaves.

Module Settings

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

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

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

iFrame example without Dynamic Wrapper

Comparison at full width

Dynamic Wrapper

iFrame example when using Dynamic Wrapper

Standard iFrame

iFrame example without Dynamic Wrapper

Dynamic means Dynamic

Dynamic Wrapper allows you to load URLs from custom fields in addition to displaying static resources. This means that a module instance can be used multiple times and depending on which article the module is used in, the corresponding content is used based on the value in the custom field.

Learn more