Hello:
I am currently trying to embed a supermarket flyer iframe on this web page, but there are several issues with this embed using the following shortcode:
[advanced_iframe src="https://www.tntsupermarket.com/cht/store-flyer" height="100%" width="100%" fullscreen_button="bottom_left" show_part_of_iframe="true" show_part_of_iframe_x="0" show_part_of_iframe_y="330" show_part_of_iframe_width="100%" show_part_of_iframe_height="1200" scrolling="no"]
1. The fullscreen button as shown in this image cannot be clicked, and it seems like it is hidden behind the iframe layer. How to solve this issue?
2. I want to have a different viewport displaying the entire flyer after a user clicks on one of the flyers, but I cannot make it work after playing with some of the code provided in examples 3 and 4. Could you please let me know what code I should use in order to display a complete flyer?
3. How to remove buttons located on the right side of the embedded website as shown in this image. I think this may involve some CSS. Could you please provide me with a code so that the buttons shown on the red label can be removed?
Thank you very much for your help and have a nice day.
Best Regards,
Hi,
1. the fullscreen button together with show_part_of_iframe is not supported and also does not make sense as you show only a part. Switching the iframe in the background to full screen does still not remove viewport you have defined. supporting this 2 features together would be a new feature which would have to be developed.
2. a new viewport is only possible when you click on a link which loads a new page. In your case it seems a popup is opening that does not trigger any onload event at all.
3. If they are inside the iframe you can only put a div over it like shown here: https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/hide-a-part-of-the-iframe
Best regards,
Michael
