Scale the contents of an iframe? Bandcamp embed player issue

Question

What I'm attempting to do is embed a Bandcamp music player onto a page of my Wordpress blog. The issue is that the max width of BC's current player is 700px and I need it to be 900px. After speaking with someone at BC, they sent me a link to the old version of their embeddable player which uses a .json to style/customize the appearance and layout.

After a little work, I was able to successfully create a BC player that spans the full 900px width I wanted. And here is where I'm stuck...

Even though the player is now the correct width, it does not scale at all on devices with smaller screens or resolutions and instead simply cuts the entire right side of the player off. I think I can get the size of the iframe to scale overall, but not the contents (so the player still appears cutoff).

Is there any way for me to get the contents of the iframe to scale along with the size of the iframe itself? My coding knowledge is limited, but if anyone can even vaguely point me in the right direction, I'd really appreciate it! This is 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 }
}

Take a look at this, http://stackoverflow.com/questions/325273/make-iframe-to-fit-100-of-containers-remaining-height — , Mar 10 '17 at 23:44
Thanks for responding! I apologize, but I don't quite understand how to use the selected answer in that link to solve my specific issue. I can get my iframe to scale the height and width without too much trouble, but it doesn't scale the content inside. So, even though the size of the iframe appears to scale on a mobile device, the entire right side of the player's visuals are cutoff. I'm thinking I need to modify something inside the JSON file to get the content to scale along with the outer size of the iframe? Like, something to scale individual elements (like the timeline)? — MAC, Mar 11 '17 at 01:48

score 0 · Answer 1 · answered Mar 11 '17 at 02:03

0

The JSON you pass when requesting the player has all the information you need, but it's beyond terrible. X is left, Y is top, W is width, H is height.

You could request a new player, basically send another JSON according to the device the user is on, it can be done, but it's not worth it. Why not go with the new version (apart from the width being 200px smaller)?

A quick solution for the 200px: you could wrap the iframe in a div that has the same background color as the player and it will look like padding on left and right.

answered Mar 11 '17 at 02:03

Ravenous

1,112
11
25

Hey Ravenous! I realize that using the new BC player is definitely the easiest solution, but I have 3 different embedded audio players in a line directly above it and all are 900px. So, when it only spans 700px in width, it looks rather jarring. There's nothing I can modify within the .json or elsewhere to scale elements of the player? Multiple .json files sounds like it could be rough... I originally tried to wrap the iframe in a div with the correct bg color as a sort of temporary stopgap solution, but I couldn't get it to work properly. How do I achieve this correctly? – MAC Mar 11 '17 at 19:45

Scale the contents of an iframe? Bandcamp embed player issue

1 Answers1