I use Squarespace for my portfolio site. They have a "block" that allows me to use embedded XD code (below) to show my app prototype. The prototype works fine but when the page loads, it automotacailly shifts half way down the page to the prototype.
<center>
<iframe id="nautilab" width="414" height="736" src="https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982" allowfullscreen sandbox="allow-same-origin allow-forms allow-scripts" frameborder="0">
</iframe>
</center>
I would like for my page to remain at the top when fully loaded instead of jumping down to the prototype. I've tried countless solutions such as using sandbox, lazy loading, and loading on scroll view. I've tried using "data src=""" as well among other options.
Unfortunately none of these solutions work. The only time it doesn't jump down to the prototype is when it doesn't load at all. How can I fix this? I'm able to use HTML, CSS, and JavaScript as well.
My best guess is to delay loading the prototype until it's in view. The only other option would be to have the prototype at the top of the page which is not what I want (messes up the flow of the project).
Any help is greatly appreciated!
2
Replies
AdChoices