Back to the Shapespark home page

Two resources in one HTML


I have added one image and one iframe (Youtube) in HTML extensive viewer.

It looks as with the same width at PC/Tablet but not in mobile devices.(The width is 650px)

I have tried many things with CSS, however I can’t find the solution.

If anyone could help me with this problem or share experience, that would be highly appreciated.


Could you share a link to this scene, so we could take a look at the HTML/CSS for this HTML label?

@wojtek, yes this is my scene:

Try limit the height of the two elements using the max-height style property and viewport-relative units (vh). For example:

<div style="text-align: center">
  <img style="max-height: 45vh;" src="">

<iframe style="max-height: 45vh; width: calc(45vh / 9 * 16); max-width: 75vw;" src="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0">

@wojtek, thank you very much!

I think I need to change the original size of the images and try it again to fit with Youtube frame.

Your example is very helpful! Thank you very much :slight_smile: