埋め込みプレーヤーと埋め込み用画像のコンテンツ

Question

私は自分のウェブサイトのプレーヤー（soundcloudとyoutube）とコンテンツの周りにカスタムボーダーを追加しようとしています。私はmyspaceの外でコーディングし、wordpressのコードを実験する経験はあまりありません。私は、オンラインHTMLエディタで必要な結果を得るのを助けた、ここやウェブ上のコードを見つけました。自分のページにコードを追加したり、WordPressに投稿したりすると、結果はただのプレーヤーにすぎません。画像はありません。私はベストを尽くさなければならない例とコードの画像を添付しました。どんな助けでも大歓迎です。

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

私が最も近い結果を与えたコードを貼り付けしようとしているが、そのは、（おそらく私の質問の一部に答える）が正しくフォーマットされていないので、どうやらそのが正しく貼り付けません。 2番目に近いコードを貼り付けました。私は実際に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>