iframe { | |
max-width: 100%; | |
} |
<!-- All you need is a defined width & height --> | |
<iframe frameborder="0" height="426" src="http://www.slideshare.net/slideshow/embed_code/9812085?rel=0" width="510"></iframe> |
function adjustIframes() | |
{ | |
$('iframe').each(function(){ | |
var | |
$this = $(this), | |
proportion = $this.data( 'proportion' ), | |
w = $this.attr('width'), | |
actual_w = $this.width(); | |
if ( ! proportion ) | |
{ | |
proportion = $this.attr('height') / w; | |
$this.data( 'proportion', proportion ); | |
} | |
if ( actual_w != w ) | |
{ | |
$this.css( 'height', Math.round( actual_w * proportion ) + 'px' ); | |
} | |
}); | |
} | |
$(window).on('resize load',adjustIframes); |
This comment has been minimized.
This comment has been minimized.
This is great, cheers! Except I changed the last line to: |
This comment has been minimized.
This comment has been minimized.
Yeah, it was a reference to window. |
This comment has been minimized.
This comment has been minimized.
or make it with pure CSS: http://andmag.se/2011/11/responsive-embeds/ |
This comment has been minimized.
This comment has been minimized.
This is really interesting. I just tried this with some iframe videos in a responsive theme I am working on and my only issue is that the video poster at very small widths seems a bit distorted. I know this is probably an edge case but this certainly is better than what I had which was nothing. Thank you! :) |
This comment has been minimized.
This comment has been minimized.
Has anyone tried http://npr.github.io/responsiveiframe/? |
This comment has been minimized.
This comment has been minimized.
Works well. We use it at NPR. If you have any problems file an issue. Always trying to make sure we keep up cross browser compatibility. |
This comment has been minimized.
This comment has been minimized.
Can someone help clean this up for me? I tried embedding this into a WP javascript editor for use in a WP site, it doesn't work. I cleaned up the spacing syntax as they suggested, but I still get this: function adjustIframes()
$(window).on('resize load', adjustIframes); !!!!!!!!!!!!!!!!!!!!Sorry for how this window is formatting the code!!!!!!!!!!!!!!!!!!!!!!!! Errors line 2 character 5 |
This comment has been minimized.
This comment has been minimized.
Thank you! |
This comment has been minimized.
This comment has been minimized.
Works great! Thank you very much! |
This comment has been minimized.
This comment has been minimized.
Great job, thx! |
This comment has been minimized.
This comment has been minimized.
Very cool! Thanks! |
This comment has been minimized.
This comment has been minimized.
Nice work, Aaron. Works like a charm. |
This comment has been minimized.
This comment has been minimized.
For a more complete solution that keeps the iframe size to the content when the content changes, or the browser resizes. Check out this library. |
This comment has been minimized.
This comment has been minimized.
This is using Jquery? how about not using Jquery? :) |
This comment has been minimized.
This comment has been minimized.
Great! It just does the job |
This comment has been minimized.
This comment has been minimized.
this is not working in IE. Can Someone Suggest any solution? Thank You |
This comment has been minimized.
This could probably be done better, but this was a first stab.