Question

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

经过一番努力，我能够成功创建一个跨越我想要的900px宽度的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，它可以完成，但它不值得。为什么不选择新版本（除了宽度小200px）？

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

缩放iframe的内容？ Bandcamp嵌入球员问题

1 个答案: