Making Spotify Embeds Responsive

embed, responsive-design, spotify

Solution

I ended up writing a little jQuery snippet to resize the player and reload the iframe on window load and resize. A very hacky solution but it works. Just include the code on whatever page you have Spotify embeds. If anyone has a better solution I'd be glad to hear it.

$(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'));
  });
});

Demo here: http://codepen.io/jbasoo/pen/gDkoc

Problem

Working on a responsive design at the moment and needs to have a responsive Spotify embed. I tried with just css (didn't work), then used fitvids.js (as a weird janky solution) which kind of works but only on initial page load and sometimes puts a big margin at the bottom. See here for an example or see the code at the bottom: http://codepen.io/oosabaj/full/keEBu Dave Rupert (maker of fitvids) said "Looks like Spotify is doing its own resize "magic" so it probably won't work." Any dev's (maybe spotify ones) got a solution? ``` <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> ```

Original source