Iframes responsives avec Jquery

14 Mar Iframes responsives avec Jquery

A l’ère des sites fluides, il peut être nécessaire pour l’intégration de vos vidéos Vimeo, Youtube, Dailymotion, de faire en sorte que vos iframe (code embedded des players) soient responsives.
Généralement leurs dimensions sont fixes et du coup ça devient très vite un casse tête.

Pour parer à ce problème, il vous suffit de passer par du code Javascript à l’aide de Jquery qui va venir modifier la taille de l’iframe proportionnellement en fonction de la redimension de l’écran.

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);

Source : https://gist.github.com/aarongustafson/1313517

Happy Coding !