What’s embedding a WebApp?

WebApps can be published independently or embedded into any other website.
Take a look at this interactive content and try to click on the different text signs:

This is an embeded content from an independent WebApp, made with VisualNEO Web and published here:
https://sinlios.com/apps/strongbox

As you can see, the embedded content has been integrated onto this post just by using some simple CSS and HTML code on the host website.

CSS code

Lets see first the CSS code:

.iframe-16-9 {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 35px;
  height: 0;
  overflow: hidden;
}
.iframe-16-9  iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

Note that the CSS has been optimized for a content with an 16:9 aspect ratio and this is defined in the padding-bottom value: 56.25%.
If your content has any other aspect ratio, just change that value to (height/width)*100.

HTML code

To get a responsive content (size adapts to its container) we need to use a DIV and IFRAME html tags just like these:

<div class="iframe-16-9">
<iframe src="https://yourdomain.com/yourcontent" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>

Finally, don’t forget to add to your App startup event the appropiate command to automatically resize your WebApp to its container size.
In this case we have added the command slScaleAppLetterBoxMax from the included plugin PowerApp.

Have you already used this trick?
If so, please share your experiences on the post comments.
Thank you!