Embedded iframe breaks when switching screen orientations

Embedded iframe breaks when switching screen orientations

Mugbarista
Excursionist
44 0 9

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.

 

IMG_9147.jpegIMG_9151.jpeg

IMG_9149.jpegIMG_9150.jpeg

Replies 10 (10)

tim
Shopify Partner
3911 395 1440

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.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
Mugbarista
Excursionist
44 0 9

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

tim
Shopify Partner
3911 395 1440

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).

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
Mugbarista
Excursionist
44 0 9
tim
Shopify Partner
3911 395 1440

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.

 

 

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
Mugbarista
Excursionist
44 0 9

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.

tim
Shopify Partner
3911 395 1440

You can add it just below the HTML, wrapped with <script> </script>

Just one  warning though -- it's written for single iframe so far.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
Mugbarista
Excursionist
44 0 9

What does written for single frame mean, please explain. 

Thank you

tim
Shopify Partner
3911 395 1440

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.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
Mugbarista
Excursionist
44 0 9

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?