让 Spotify 嵌入响应式
Posted
技术标签:
【中文标题】让 Spotify 嵌入响应式【英文标题】：Making Spotify Embeds Responsive 【发布时间】：2012-10-13 21:48:14 【问题描述】：目前正在进行响应式设计，需要嵌入响应式 Spotify。我尝试只使用 css（没用），然后使用 fitvids.js（作为一种奇怪的 janky 解决方案），这种方法有效，但仅在初始页面加载时有效，有时在底部有很大的余量。
查看示例或查看底部的代码： http://codepen.io/oosabaj/full/keEBu
Dave Rupert（fitvids 的制造商）说：“看起来 Spotify 正在做自己的调整大小‘魔法’，所以它可能行不通。”
任何开发者（可能是 Spotify 开发者）都有解决方案？
<html>
<head>
<style>
body
background: #e0d7d4;
#wrap
width: 900px;
min-height: 200px;
margin: 15px;
background: #fff;
border-radius: 2px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
@media only screen and (max-width: 980px)
#wrap
width: 700px;
@media only screen and (max-width: 780px)
#wrap
width: 500px;
@media only screen and (max-width: 580px)
#wrap
width: 300px;
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://fitvidsjs.com/js/jquery.fitvids.js"></script>
<script>
$(document).ready(function()
$("#wrap").fitVids( customSelector: "iframe[src^='https://embed.spotify.com']");
);
</script>
</head>
<body>
<div id="wrap">
<iframe src="https://embed.spotify.com/?uri=spotify:user:erebore:playlist:788MOXyTfcUb1tdw4oC7KJ&theme=white" frameborder="0" allowtransparency="true"></iframe>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：我最终编写了一个小 jQuery sn-p 来调整播放器的大小并在窗口加载和调整大小时重新加载 iframe。一个非常hacky的解决方案，但它有效。只需在您嵌入 Spotify 的任何页面上包含代码即可。如果有人有更好的解决方案，我会很高兴听到它。
$(document).ready(function()
$('iframe[src*="embed.spotify.com"]').each( function()
$(this).css('width',$(this).parent(1).css('width'));
$(this).attr('src',$(this).attr('src'));
);
);
$(window).resize(function()
$('iframe[src*="embed.spotify.com"]').each( function()
$(this).css('width',$(this).parent(1).css('width'));
$(this).attr('src',$(this).attr('src'));
);
);
在这里演示：http://codepen.io/jbasoo/pen/gDkoc
【讨论】：
CSS 是否无法在您的网站上运行？它似乎正在处理您的 codepen 演示。我假设您尝试过类似的方法：width:100% !important;【参考方案2】：不确定如何最好地将其融入您的设计中，但 Spotify 小部件可能对其比例非常挑剔。他们在documentation page 上给出了最小和最大宽度和高度，但更重要的是它包含这个小宝石：
如果给定高度比给定宽度大 80 像素，则将渲染较大的播放器。否则将渲染紧凑型播放器。
听起来应该只会影响显示的播放器版本。实际上，我发现不完全遵守该限制会导致一些奇怪的显示故障——播放器的某些部分被隐藏、iframe 中的大块空白等等。
我的小部件在动态大小的 shadowbox 中可以很好地显示各种播放列表，但由于该 shadowbox 是使用 javascript 启动的，因此我可以完全控制宽度和高度。我可以始终将宽度设置为高度 - 80。
它也不能很好地调整窗口大小。 iframe 完美调整大小，但其内容不会重绘。实际的小部件页面似乎在初始加载时根据 iframe 中的可用空间计算其尺寸，并且不关注页面调整大小事件。通过直接加载a widget url，即使没有 iframe，您也可以看到这种情况。如果这对您来说是一个大问题，也许您的外部页面可以使用 javascript 来监视调整大小，并使用该事件来触发 iframe 的刷新？
【讨论】：
【参考方案3】：我合并了这两个解决方案：
https://gist.github.com/mennolui/687fdc251c6a64289da5 https://codepen.io/jbasoo/pen/gDkoc我改变了高度也是响应式的。
一个例子here。
所以我喜欢这个 javascript：
$(document).ready(function()
/* Make Spotify fit initial layout */
respondify();
);
$(window).resize(function()
/* Make Spotify fit layout on resize */
respondify();
);
function respondify()
$('body').find('iframe[src*="spotify.com/"]').each(function()
var w = $(this).parent(1).width();
$(this).css('width', w + 'px');
var h = $(window).height();
$(this).css('height', h + 'px');
$(this).attr('src',$(this).attr('src'));
);
【讨论】：
以上是关于让 Spotify 嵌入响应式的主要内容，如果未能解决你的问题，请参考以下文章