Adding an iFrame sizing not right

Site URL: https://thegrainstorelewes.com/creative-shoot-location

Hi all,

Firstly, I am no coder so have been banging my head with this one having followed all the steps on the Squarespace support site.

I Have tried to add a custom code to my client's site to embed a VR tour which is on our partner's site (here's what it should look like). The code is for an iframe and has been added as HTML code. In the coding, the sizing is set to 100x100% but on the site is displays at the right width but the height is capped.

I have tried adding via a code box and using the embed content block and neither works. Can anyone advise how I get this the right size. Link to the page and the code copied below for reference.

In addition, 90% of the time, I can't see the embedded tour at all when I use Chrome. It just doesn't load. 

Thanks for any help available, Katherine  

https://thegrainstorelewes.com/creative-shoot-location

<iframe src="//storage.net-fs.com/hosting/7043985/1/" name="The Grain Store Master" width="100%" height="100%" frameborder="0" allow="fullscreen; accelerometer; gyroscope; magnetometer; vr; xr; xr-spatial-tracking; autoplay; camera; microphone" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true"></iframe> 

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!

On 4/23/2021 at 10:28 PM, Wolfsilon said:

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!

 

Hi @Wolfsilon Thank you so much!!! I had previously tried manually changing the percentages as thought that might be an issue. Anyway your custom CSS worked perfectly.

Thank you so so much! Katherine 🙂