How can I fix iFrame code issues for optimal mobile viewing?

[Jayare]

Hi!

I have a supplier whom I use to show our customers a built in Diamond Search on our site. For years it has worked really well on Desktop & Mobile but they have reworked the interface recently and supplied us with a new code. It absolutely does not work and they are not very helpful in sorting this out. Hoping someone here is able to help figure this out.

Original Code:

<script src="//diamondhunt.com/static/embed/embed.js" id="embed-script" data-url="//cirellijewelers.diamondhunt.com/"></script>

New Supplied Code:

<iframe frameborder='0' height='400' src='<div style="height: 900px;"><iframe src="https://www.diamondhunt.com/iframe/02a611f1a74ef58c8ed107b12eb066e77be2d729/client/diamond" style="width: 100%; height: 100%;"></iframe></div><style>iframe {width:100%;height:680px;border:none;overflow:hidden;}@media screen and (max-width:1166px) {iframe {width:100%;height:680px;}}@media screen and (max-width:1024px) {iframe {width:100%;height:680px;}}@media screen and (max-width:980px) {iframe {width:100%;height:680px;}}@media screen and (max-width:767px) {iframe {width:100%;height:1024px;}}@media screen and (max-width:599px) {iframe {width:100%;height:1024px;}}@media screen and (max-width:479px) {iframe {width:100%;height:1024px;}}@media screen and (max-width:374px) {iframe {width:100%;height:1024px;}}</style>' width='600'></iframe>

When I save the new code in a Page it gets all jumbled and looks like this after saving:

<iframe width="600" src="<div%20style=&quot;height:%20900px;&quot;><iframe%20src=&quot;https://www.diamondhunt.com/iframe/02a611f1a74ef58c8ed107b12eb066e77be2d729/client/diamond&quot;%20s...;></iframe></div><style>iframe%20{width:100%;height:680px;border:none;overflow:hidden;}@media%20screen%20and%20(max-width:1166px)%20{iframe%20{width:100%;height:680px;}}@media%20screen%20and%20(max-width:1024px)%20{iframe%20{width:100%;height:680px;}}@media%20screen%20and%20(max-width:980px)%20{iframe%20{width:100%;height:680px;}}@media%20screen%20and%20(max-width:767px)%20{iframe%20{width:100%;height:1024px;}}@media%20screen%20and%20(max-width:599px)%20{iframe%20{width:100%;height:1024px;}}@media%20screen%20and%20(max-width:479px)%20{iframe%20{width:100%;height:1024px;}}@media%20screen%20and%20(max-width:374px)%20{iframe%20{width:100%;height:1024px;}}</style>" height="400" data-sanitized-frameborder="0"></iframe>

I was able to sort of get it working on Desktop with the following code but when loading on mobile it is unoptimized:

<iframe style="min-width: 100%; height: 1300px; border: none;" src="https://www.diamondhunt.com/iframe/02a611f1a74ef58c8ed107b12eb066e77be2d729/client/diamond" frameborder="0" scrolling="no">
</iframe>

The unoptimized mobile code can be found live on my page now:

https://www.cirellijewelers.com/pages/diamonds

Lastly not sure why but I've noticed a need to reload this page at least once for it to populate correctly. Maybe it's something on the source page or maybe it's related to something on my end but if anyone has insight as to why that would be awesome too.

Appreciate any and all help in advance. Thanks!