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