Making Player and border responsive and proportionate

1

Hello

I’m a newbie here and to coding. I have a custom border that I created that goes around content on my website (which can be found here. I have a soundcloud player that I have inside the border. At first, I was satisfied until I realized the player wasn’t responsive anymore. I changed the height and width of the player to auto and it fixed the responsive issue. However, now the player doesn’t fit inside the border at all, and it stretches both the border and the player.

Here is the HTML where everything fits but its not responsive.

<div class="frame_outer" style="padding: 18px; width: 600px; height: 300px; text-align: center;"><iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/280952276&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false" width="100%" height="220" frameborder="no" scrolling="no"></iframe></div>

Here is the CSS:
.frame_outer iframe{
  padding: 50px 49px;
    background: url(http://www.dontcursekids.com/wp-content/forum/uploads/2017/09/Border-1.png);
    background-size: 100% 100%;
}

Any help would be greatly appreciated. thank you

3

thank you! I was looking for a way to do that just now lol.

4

Hav a look here.