wordpress 图像中的嵌入式播放器和内容

Question

我正在尝试为我的网站的播放器（soundcloud 和 youtube）和内容添加自定义边框。我没有太多在 myspace 之外编码和在 wordpress 上试验代码的经验。我在这里和整个网络上找到了代码，它们帮助我通过在线 html 编辑器获得了我想要的结果。当我将代码添加到我的页面或 wordpress 中的 post 时，结果最终只是播放器......没有图像。我附上了示例图像和我得到的最好的代码。任何帮助将不胜感激。

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>

wordpress 图像中的嵌入式播放器和内容

Embedded player and content in image for wordpress

html

css

image

soundcloud