Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JQuery code to make Flickr embeds responsive (and resize correctly when loading in a mobile browser). See http://ari.gesher.net/photos-the-gesher-world-tour/ for a working example.
$(document).ready(function() {
$("#pics iframe").each(function(index) {
var ratio = $(this).height() / $(this).width();
var origHeight = $(this).height();
var origWidth = $(this).width();
var self = this;
// bind to window with closure that references the
// iframe since the iframe doesn't get resize events
// until (you know) we resize it.
$(window).resize(function() {
if($(self).parent().width() > origWidth) {
$(self).width(origWidth);
$(self).height(origHeight);
} else {
$(self).width($(self).parent().width());
$(self).height($(self).parent().width() * ratio);
}
});
});
$(window).resize();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment