Update! November 16th, 2015

Here is an update to an older post, Flickr is now doing this for us, but you need to do it from a single image page NOT the album sharing page. I also suggest using a horizontal photo as the cover photo as it displays better than a vertical. The verticals will fit inside of the height properly and the width of the iframe box will fit into the width of your page as it should. Keep shooting!

Make your flickr photos load responsively! Try resizing this browser window to see how it works.

CSS

 
.flickrwrap {position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.flickrwrap iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
 

HTML, be sure to remove the iframe height and width properties from the default flickr code. Change the username and the gallery id number in the src link too, should be good to go!

 
<div class="flickrwrap">
<iframe src="https://www.flickr.com/photos/cazillo/11409484333/player/"
frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
</div>