My goal is to embed a Bandcamp music player on my WordPress blog page, but I'm facing a challenge. The maximum width of the current player is 700px and I need it to be 900px. After consulting with someone at Bandcamp, they directed me to the old version of their embeddable player which uses a .json file for custom styling.
After some effort, I managed to create a Bandcamp player that spans the full 900px width I desired. However, I've hit a roadblock...
Even though the player now has the right width, it doesn't scale properly on devices with smaller screens or resolutions. It simply cuts off the right side of the player. I believe I need to adjust the iframe size so that both the iframe and its contents scale proportionately, preventing the cutoff appearance.
Is there a way to make the contents of the iframe scale along with the iframe size? My coding skills are limited, but any guidance in the right direction would be greatly appreciated! Here's what I have so far:
HTML:
<iframe style="height: 80px; width: 900px; border: 0;" src="http://bandcamp.com/EmbeddedPlayer/track=2376719032/layout=http_3A_2F_2Fsoundcherry.com_2Fbcplayer.json/linkcol=ffffff/bgcol=333333/fgcol=ffffff/" width="300" height="150" frameborder="0"></iframe>
JSON:
{
"art": { "x": 1, "y": 1, "w": 78, "h": 78, "show": true },
"maintext": {
"x": 132, "y": 24, "w": 330, "h": 120, "show": true,
"styles": { "fontFamily": "Arial", "fontSize": 11, "fontWeight": "normal" }
},
"subtext": {
"x": 131, "y": 5, "w": 330, "h": 120, "show": true,
"styles": { "fontFamily": "Arial", "fontSize": 15, "fontWeight": "bold" }
},
"totaltime": {
"x": 864, "y": 20, "w": 32, "h": 16, "show": true, "fontsize": 11,
"styles": { "fontFamily": "Arial", "color": "0x9f1d0f", "fontSize": 11 },
"track": { "y": 63 }
},
"timeline": {
"x": 90, "y": 48, "w": 800, "h": 16, "show": true
},
"currenttime": {
"x": 88, "y": 174, "w": 32, "h": 16, "show": true, "fontsize": 11,
"styles": { "fontFamily": "Arial", "color": "0x9f1d0f", "fontSize": 11 },
"track": { "y": 63 }
},
"play": {
"x": 90, "y": 6, "w": 30, "h": 30, "show": true
},
"next": {
"x": 153, "y": 63, "w": 11, "h": 11, "show": true
},
"prev": {
"x": 131, "y": 63, "w": 12, "h": 12, "show": true
},
"linkarea": {
"x": 545, "y": 0, "w": 350, "h": 30, "show": true,
"styles": { "textAlign": "right", "fontFamily": "Verdana", "fontSize": 13, "fontWeight": "bold" },
"track": { "y": 5 }
}