Question

目前正在开展响应式设计，需要有一个响应式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>

Answer 1

我最后编写了一个小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

Answer 2

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

如果给定高度比给定宽度大80个像素，则渲染较大的玩家。否则，小型播放器将被渲染。

声音就像它应该只影响显示哪个播放器版本。实际上，我发现不全面符合这种限制会导致一些时髦的显示故障 - 隐藏播放器的部分内容，iframe中的大块空白等等。

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

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

Answer 3

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

我改变了身高也很灵敏。

示例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具有响应能力

3 个答案: