Last active
September 23, 2015 12:54
-
-
Save mennolui/687fdc251c6a64289da5 to your computer and use it in GitHub Desktop.
Make Spotify embeds ('Spotify Play Button') fit the width of your responsive layout.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
/* Make Spotify fit initial layout */ | |
respondify(); | |
}); | |
$(window).resize(function() { | |
/* Make Spotify fit layout on resize */ | |
respondify(); | |
}); | |
function respondify() { | |
// Make the Spotify playlist embed fit the layout. | |
// Spotify wants the height of the embed to be the width + 80px, | |
// When the embed is narrower than 210px, Spotify wants the height to be 80px (art work and title only). | |
$('body').find('iframe[src*="embed.spotify.com/?uri="]').each(function() { | |
var w = $(this).parent(1).width(); | |
var h_offset = 80; | |
$(this).css('width', w + 'px'); | |
if (w < 210) { | |
$(this).css('height', h_offset + 'px'); | |
} | |
else { | |
$(this).css('height', (w + 80) + 'px'); | |
} | |
$(this).attr('src',$(this).attr('src')); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Improves upon:
http://codepen.io/jbasoo/pen/gDkoc
Get your Spotify embed code here:
https://developer.spotify.com/technologies/widgets/spotify-play-button/