All things Shopify and commerce
I need to use an iframe on my product pages. The iframe is different for each product but the code provided for it is the same other than the idx number which designates the product. The code looks like this:
<iframe src="https://spinzam.com/shot/embed/?idx=459905" width="640" height="640" scrolling="no" style="max-width:100%; max-height:100vw;"></iframe>
The problem I am having is that the embedded 360 image scales correctly on the portrait and landscape modes on the first viewing. If the device is rotated and the orientation changes, the images in the iframe break. I've tried every possible combination of values in the iframe code without much luck. The only somewhat successful attempt was setting the max width to 300 which solves the problem but makes the image far too small in landscape mode. I found some code that reloads the page on change of orientation, this too fixes this issue as the first viewing always looks right. But it's a clunky workaround that I'm not thrilled with.
Any help with this issue would be most appreciated.
Thank you.
Usual approach is to create a responsive container and fit an iframe into this container.
Similar to https://www.w3schools.com/howto/howto_css_responsive_iframes.asp or https://help.viostream.com/frequently-asked-questions/how-do-i-make-an-iframe-embed-responsive/ if you can't amend CSS.
Many themes already have similar CSS rules for embedding Youtube/Vimeo videos so it may be possible to re-use them.
I tried the tutorial at the first link. The aspect ratio was maintained but the image within the frame still broke when changing the orientation. It got cut into two seperate sections as seen in my screenshots I posted in my original post.
Thank you
Screenshot is not enough to tell anything. Share the link to your store/page where we can see this (preview link, if not yet published).
Unfortunately, it would not work like this and this is because of how they show these videos.
How this works: they set background to a very tall jpeg which consists of many frames stacked on top of each other (for example -- https://dc0sih4595mw5.cloudfront.net/contents/member/215613/2156131714948384_film.jpg)
When you drag your pointer, they amend background position to show these frames one by one.
The problem is that they do not save at which frame they are now, but rather use offset from the top of the file.
Say, you have your iframe with 500px height.
Initially, it has background-position: 0 0;
Then you drag your pointer and video moves, say 3 frames and now background-position: 0 1500px;
If you resize your browser (or rotate your device) and your iframe is now 400px high, background-position is not changed and this is now shows frame 1500/400 which is 4 and 3/4 of frame 😞
Ideally, they should amend their coding to remember current frame and recalculate background-position from this.
If not possible, there is still a workaround to make it work. The idea is to fix the size of iframe in pixels and use trannsform: scale to fit it in place.
Look at https://codepen.io/tairli/pen/xxNxJQo and try resizing your browser.
I'd like to try the workaround.
To implement it do I do the following?
1. Add html into the product page
2. Add CSS into base.css
3. What do I do with the JS?
Thank you so much for your help.
You can add it just below the HTML, wrapped with <script> </script>
Just one warning though -- it's written for single iframe so far.
What does written for single frame mean, please explain.
Thank you
I mean this particular code would work only for the first iframe if you want to embed several on one page.
Just did not want to add complexity.
So does frame mean one full animation would work correctly per product page?
If that’s the case, what needs to happen to enable more than one per product page?
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025