I'm trying to add custom borders around players (soundcloud and youtube) and content for my website. I don't have much experience coding outside of myspace and experimenting with codes on wordpress. I have found codes on here and across the web that helped me get the result that I want with online html editors. When I add the code to my pages or post in wordpress, the result ends up being just the player... No Image. I attached images of examples and the codes that I got to work the best. Any help would be greatly appreciated.
This is how I want the border to fit around the players and content
I'm trying to paste the code that gave the closest result, but apparently its not pasting correctly because its not formatted properly (probably answers part of my question). I did get to paste the second closest code. I actually got it work in Wordpress too. However, I have no idea how to position the player over the image correctly. The image and the play show, but not aligned. Once again, any help is appreciated.
<div style="background: url(http://www.dontcursekids.com/wp-content/uploads/2017/09/Border-1.png) no-repeat; padding: 18px; width: 600px; height: 300px;">
<iframe width="80%" height="154" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/280952276&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
Please check this, i had added the background image to iframe
.frame_outer iframe{
padding: 56px 49px;
background: url(http://www.dontcursekids.com/wp-content/uploads/2017/09/Border-1.png);
background-size: 100% 100%;
}<div class="frame_outer" style="padding: 18px; width: 600px; height: 300px;">
<iframe width="80%" height="154" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/280952276&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe></div>