html - 缩放 iframe 的内容？ Bandcamp 嵌入播放器问题

Question

我正在尝试做的是将 Bandcamp 音乐播放器嵌入到我的 Wordpress 博客页面上。问题是 BC 当前播放器的最大宽度是 700px，我需要它是 900px。在与 BC 的某人交谈后，他们向我发送了一个指向 old version 的链接。他们的可嵌入播放器使用 .json 来设计/定制外观和布局。

经过一些工作，我能够成功地创建一个跨越我想要的完整 900 像素宽度的 BC 播放器。这就是我被困的地方......

即使播放器现在的宽度正确，它也不会在屏幕或分辨率较小的设备上缩放，而是简单地切掉播放器的整个右侧。我想我可以让 iframe 的大小整体缩放，但不能缩放内容(所以播放器仍然出现截止)。

有什么方法可以让 iframe 的内容随 iframe 本身的大小一起缩放？我的编码知识有限，但如果有人能模糊地指出我正确的方向，我将不胜感激!这是我到目前为止所拥有的:

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 }
}

Answer 1

您在请求播放器时传递的 JSON 包含您需要的所有信息，但它非常糟糕。 X为左，Y为上，W为宽，H为高。

您可以请求一个新播放器，基本上根据用户使用的设备发送另一个 JSON，这可以做到，但不值得。为什么不使用新版本(除了宽度小 200 像素)？

200px 的快速解决方案:您可以将 iframe 包装在一个与播放器具有相同背景颜色的 div 中，它看起来像左右填充。