Shopify themes, liquid, logos, and UX
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 |
---|---|
180 | |
154 | |
72 | |
35 | |
34 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023