嵌入式播放器和圖像中的內容爲wordpress

我試圖添加自定義邊界周圍播放器（soundcloud和youtube）和我的網站的內容。我沒有太多編碼myspace之外的經驗，並在wordpress上試驗代碼。我在這裏和整個網絡上找到了代碼，這些代碼幫助我獲得了我想要的在線HTML編輯器的結果。當我將代碼添加到我的頁面或在wordpress中發佈時，結果最終只是玩家...沒有圖像。我附上了例子的圖片和我獲得最佳效果的代碼。任何幫助將不勝感激。嵌入式播放器和圖像中的內容爲wordpress

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>

來源

2017-09-06 Bryan Howard

請檢查這一點，我已經添加了背景圖像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>

來源

2017-09-06 10:54:55

哇。起初我無法完成它的工作，但意識到第一部分是CSS。我還在學習。無論如何非常感謝你。它改變了尺寸和填充後工作。如果我更改填充，尺寸和鏈接到源，這是否適用於任何類型的帖子？ –

明白了。只需要現在打破代碼。 –

嵌入式播放器和圖像中的內容爲wordpress

回答

相關問題