让 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&amp;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 嵌入响应式的主要内容,如果未能解决你的问题,请参考以下文章

响应式的嵌入内容和图片

响应式视频嵌入到弹性父级中

响应式将多个视频彼此相邻并在彼此下方嵌入

text 添加响应式容器以嵌入wordpress

javascript 响应式YouTube嵌入

php Wordpress响应式视频嵌入