Shopify themes, liquid, logos, and UX
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
Hello, I am trying to embed an html5 file in an iframe, in a metafield on a product page.
The file is responsive on its own, but as soon as you host on the shopify site, it loses the responsiveness.
See the 'Look inside' tab here
https://butlerdiaries.com/collections/diaries/products/childcare-centre-diary
I've also set up some tests on a page and cannot get them to work on the iphone either
https://butlerdiaries.com/pages/flipbook-test
Thanks
Leona
Hi @LennyB,
Hope you are doing well.
can you please share some some small videos/recording of the issue? so, I can get the better idea to provide the solution.
Hi @Akibhusen
I cant seem to make a video. but the iframe is
<iframe src="https://www.childcaretechtrends.com/flipbooks/ccd/index.html" width="900" height="637" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
When just the file is viewed
https://www.childcaretechtrends.com/flipbooks/ccd/index.html
it is responsive on phone (eg fills window and flips one page at a time)
but in the iframe on the shopify page - it is cut off on the phone
it is looking good and is responsive on a mobile screen
Some times iPhone behaves like this. can you confirm on an android phone? I have seen on the Android phone it is working well.
I have had seen this problem earlier on iPhone, I don't think so there is any reliable solution.
Hi @LennyB,
Please try to updating your code as per below. Let me know if you still facing the same issue after updating.
<iframe src="https://www.childcaretechtrends.com/flipbooks/ccd/index.html" width="100%" height="637" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
Have you used any JS library t achieve this?
Can I check your development for this? could you add me as a staff in your store?
Hi Akibhusen, thank you anyway, but I have decided not to use this flip book
Okay @LennyB
User | RANK |
---|---|
133 | |
91 | |
77 | |
69 | |
43 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022