Coding

Ich mag Spotify, hab zwar kein bezahltes Abo, aber um schnell mal Musik nachzuschlagen ist es super.
Da nehme ich auch gerne mal die Werbung in kauf.

Für ein aktuelles Projekt möchte ich den Spotify-Player einbinden. Dafür gibt es hier einen schönen Generator.

Leider ist aber der Iframe nicht responsive. Nach bisl googlen und selbst im Javascript zu frickeln, bin ich auf diese Lösung gekommen:

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

}

Das ganze könnt ihr hier auf CodePen auch anschauen.