how to change height of iframe when it loads?

Question

$('#song-link').change(function () {
  var link = $('#song-link').val();
  SC.oEmbed(link, {
    element: document.getElementById('putTheWidgetHere')
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>
<input  id="song-link" placeholder="Paste Soundcloud link here" name="song_link"   type="text">
<div id="putTheWidgetHere"></div>

Code helps me to preview the link of soundcloud. You can test its works fine. but i want to change its height from 400px to 200px. I have tried adding addclass() and css(). But it didn't work.

I couldn't figure which event will trigger these functions since the height must be set after the link is pasted on input text and loads on the iframe that soundcloud loads.

Answer 1

Try this:

#putTheWidgetHere iframe {
    min-height: 200px;
    height: auto;
}