title: What is the best way to embed a SoundCloud widget in react-native-webview?
body: <p>So basically as the title suggests. I have a <code>react-native-webview</code> component in my app and I want it to show a SoundCloud player via the SoundCloud <a href="https://developers.soundcloud.com/docs/api/html5-widget" rel="nofollow noreferrer">widget</a>. I also want to use the available methods exposed by the widget API (for example <code>getDuration</code>), add listeners to events, etc. I have tried 2 approaches to accomplish this, but each approach ends with a different issue that I haven't been able to resolve.</p>
  <p><strong>Option 1:</strong></p>
  <p>The <code>source</code> prop that I pass to the <code>WebView</code> is a static HTML string:</p>
  <pre><code>&lt;html&gt;
          &lt;head&gt;
            &lt;script src=&quot;https://w.soundcloud.com/player/api.js&quot;&gt;&lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt;
            &lt;iframe
              id=&quot;sound-cloud-iframe&quot;
              src=&quot;${finalUri}&quot;
            &gt;
            &lt;/iframe&gt;
          &lt;/body&gt;
        &lt;/html&gt;
  </code></pre>
  <p>That works well with the API and everything, but I can't seem to make it look good on-screen. It looks like this:</p>
  <p><a href="https://i.stack.imgur.com/eOEOe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eOEOe.png" alt="enter image description here" /></a></p>
  <p>The red border marks the <code>WebView</code> component. I want the video to take up that entire space, which I can do with setting the <code>width</code> &amp; <code>height</code> attributes of the <code>iframe</code> to 100%. The problem is, that when I do that, the elements inside the iframe retain their size (e.g the track/artist name, the progress bar at the bottom, etc). See here:
  <a href="https://i.stack.imgur.com/mjOUY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mjOUY.png" alt="enter image description here" /></a></p>
  <p>If I could somehow make it all scale by the same proportions, that would be amazing. Injecting JS scripts that scale each and every element individually seems like a bad solution.</p>
  <p><strong>Option 2:</strong></p>
  <p>The <code>source</code> prop that I pass to the <code>WebView</code> is a SoundCloud link, for example:</p>
  <pre><code>source={{uri: https://w.soundcloud.com/player/?visual=true&amp;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F94546771&amp;show_artwork=true}}
  </code></pre>
  <p>That makes the video player look just right:</p>
  <p><a href="https://i.stack.imgur.com/0BtcP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0BtcP.png" alt="enter image description here" /></a></p>
  <p>But, it won't allow me to use the API exposed by SoundCloud. The reason is that, as mentioned in their API reference, there needs to be some <code>iframe</code> element that I need to to pass into <code>SC.Widget</code> in order to be able to use all the methods and listeners that I need. There is no <code>iframe</code> here! The HTML content that renders inside the <code>WebView</code> is actually the exact inner document that would render inside the <code>iframe</code> if I used the static HTML that I put in Option 1. If I could make the API work like that somehow, that would be amazing.</p>
  <p>So, basically, I'm wondering which option presents the more-easily-solved issue, if they're solvable at all. Any help would be much appreciated.</p>