Hello there,
When you use an embed code, typically an embed code will use percentages for dimensions. In your case -- "100x100%". This is done to make the embedded code "responsive". Generally speaking...
Responsive = Mobile-Friendly.
Because the embed code is inserted into your website using a Code Block/Embed Block (which is typical), Squarespace predetermines the dimensions of the Code/Embed Blocks for you. The preset height of the Code Block will overrule the embed dimensions if the dimensions of the embed are percentages, because the embed is set to be 100% of the block it is inserted into.
100% doesn't always mean and object will 100% of the page.
Another way to think of it is that -- 100% could also include anything less than 100% of the intended height if it is inserted into a container. In this case, the container is the Code/Embed Block with preset dimensions.
Unless the embed code uses "px" or non-scalable dimensions your code may appear constrained or contained within that Code Block. To fix this, we can use the following:
#block-yui_3_17_2_1_1619008534514_75765 iframe {
height: 100vh;
}
You can insert this code into your website by navigating in your editor window: Home> Design > Custom CSS. The "#" identifies the block you want to target followed by the actual object you want to modify.
vh = Viewport Height
Which is another way of telling browser that the object should be the height of the viewing screen. Give or take. You can set the height of the "vh" by changing the number to anything greater than or less than "100vh". You can change "100vh" to "90vh" or even "200vh".
Hope that his helps!
