Feeding information from external site into new design

[workingmedia]

Hello Muse forum members.
I'm starting a new project for a new client. The biggest issue this client has is the current site doesn't load the information when viewed on a desktop. See attached.

Here is what is looks like on a mobil phone.

From what I can see from the code it looks like the original design used an iFrame. I'm not sure if Muse and can handle the iFrame option. A developer I spoke to mentioned I should see if the data can be transported via JSON and then added via JQUARY to the page. As as noncoder loving the power of MUSE I'm hoping someone can help guide me with the correct answer to this issue.

1. Can muse handle this kind of data?

2. If it can, what's the best way to create such a page?

I was told from the bizbuysell developer that iFrame is only option.

— John Perry

[workingmedia]

I just received some additional information from the developer. Here is the code which is needed.

<script type="text/javascript">window.define = undefined;</script>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.5/iframeResizer.js"></script>

<iframe id="bbs" src="https://www.bizbuysell.com/brokerdirectory/Profile/ViewAllListings.aspx?J=b&I=1269&m_dmr=1" marginwidth="0" marginheight="0" scrolling="no" style="border-style:none;width:100%;" onload="$(window).scrollTop(0);"></iframe>

<script type="text/javascript">

    try { iFrameResize({},'#bbs'); } catch(e) {}

</script>

[workingmedia]

I used the code above and the feed worked fine but the object was not scaling and was not dynamic. So I searched around and found some code which allowed embedded video to scale as page resized.

Here is that code.

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src="http://www.youtube.com/embed/t3vsKbR7xws?&color=333463&title=0&byline=0&portrait=0" width="1280" height="720" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

Not knowing how to code too much I tried my best to remove anything related to the YouTube feed and insert the feed which I needed  into the page. It seems like the code below works but if someone can advise me as to any errors within the code I would appreciate it. BIG thanks!

— JP

<div><style>.embed-container { position: relative; padding-bottom: 25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class=‘embed-container’>

<script type="text/javascript">window.define = undefined;</script>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.5/iframeResizer.js"></script>

<iframe id="bbs" src="https://www.bizbuysell.com/brokerdirectory/Profile/ViewAllListings.aspx?J=b&I=1269&m_dmr=1" marginwidth="0" marginheight="0" scrolling="no" style="border-style:none;width:100%;" onload="$(window).scrollTop(0);"></iframe>

<script type="text/javascript">try { iFrameResize({},'#bbs'); } catch(e) {}</script></iframe></div>