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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$(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'));
});
}
$(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')); }); }
$(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.