4

目前正在进行响应式设计，需要嵌入响应式 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&amp;theme=white" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
    </div>
</body>
</html>
4

3 回答 3

4

我最终编写了一个小的 jQuery 片段来调整播放器的大小并在窗口加载和调整大小时重新加载 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

于 2013-05-09T13:16:19.073 回答
1

不确定如何最好地将其融入您的设计中，但 Spotify 小部件可能对其比例非常挑剔。他们在文档页面上给出了最小和最大宽度和高度，但更重要的是它包含这个小宝石：

如果给定高度比给定宽度大 80 像素，则将渲染较大的播放器。否则将渲染紧凑型播放器。

听起来它应该只影响显示的播放器版本。实际上，我发现不完全遵守该限制会导致一些奇怪的显示故障——播放器的某些部分被隐藏，iframe 中的大块空白等等。

我的小部件在动态大小的阴影框中显示了各种播放列表，但由于该阴影框是使用 javascript 启动的，因此我可以完全控制宽度和高度。我可以始终将宽度设置为高度 - 80。

它也不能很好地调整窗口大小。iframe 完美调整大小，但其内容不会重绘。实际的小部件页面似乎在初始加载时根据 iframe 中的可用空间计算其尺寸，并且不关注页面调整大小事件。通过直接加载小部件 url，即使没有 iframe，您也可以看到这种情况。如果这对您来说是一个大问题，也许您的外部页面可以使用 javascript 来监视调整大小，并使用该事件来触发 iframe 的刷新？

于 2012-10-25T02:57:14.473 回答
0

我合并了这两个解决方案：

我改变了高度也是响应式的。

这里有一个例子。

所以我结束了这个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'));
    });

}
于 2019-03-18T09:06:25.847 回答