워드 프레스에 대한 이미지에 플레이어와 콘텐츠가 포함되어 있음

Question

내 웹 사이트의 플레이어 (soundcloud 및 youtube)와 콘텐츠 주위에 맞춤 테두리를 추가하려고합니다. 나는 myspace의 이상으로 코딩하고 wordpress에 부호로 실험하는 다량 경험이 없다. 저는 온라인 HTML 편집기에서 원하는 결과를 얻는데 도움이되는 코드를 여기저기서 웹에서 발견했습니다. 내 페이지에 코드를 추가하거나 wordpress에 게시하면 결과는 플레이어가됩니다 ... No Image. 나는 최선을 다해야하는 예제와 코드의 이미지를 첨부했다. 어떤 도움이라도 대단히 감사하겠습니다.

This is how I want the border to fit around the players and content

나는 가장 가까운 결과를 준 코드를 붙여 넣하기 위해 노력하고있어,하지만이 (아마 내 질문의 일부를 대답) 형식이 잘못 때문에 외관상으로는 제대로 붙여 넣기 없습니다. 나는 두 번째로 가까운 코드를 붙이려고했다. 나는 실제로 그것도 Wordpress에서 일하게했다. 그러나 이미지 위에 플레이어를 올바르게 배치하는 방법을 모릅니다. 이미지와 연극은 표시되지만 정렬되지는 않습니다. 다시 한번, 어떤 도움을 주셔서 감사합니다.

<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&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe> 

Answer 1

이를 확인하시기 바랍니다, 나는 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&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe></div>