Entourer tous les iframe d’une balise : exemple d’une vidéo responsive

Comment entourer tous ses iframes google par des balises

Voici un petit mémo de rappel pour entourer toutes ses iframes google,  ses vidéos youtube ou ses cartes google map, par des balises additionnelles. Cela peut être utile pour définir une règle pour toutes les iframes google d’un site par exemple et laisser intactes les autres provenant d’autres sources;

Entourer ses balises Youtube

Ci-dessousi j’entoure tous mes iframes Youtube d’une classe pour pouvoir les styliser. Selon la doc bootstrap, ces classes permettent aux navigateurs de déterminer les dimensions des vidéos ou des diaporamas en fonction de la largeur du bloc qui les contient en créant un rapport intrinsèque qui s’adapte correctement à tout périphérique. Vos vidéos seront donc responsive. On entoure les iframe des classes ‘embed-responsive’  et ‘embed-responsive-16by9‘, mais on ajoute également la classe ‘embed-responsive-item‘ directement à l’iframe, sans quoi ca ne marche pas.

jQuery(document).ready(function(){ 
  jQuery('iframe[src*="youtube.com"]').wrap('<div class="embed-responsive embed-responsive-16by9"/>');
jQuery('iframe[src*="youtube"]').addClass('embed-responsive-item')
});

Bien sûr il faut utiliser bootstrap, ou alors retrouver le css de ces classes pour l’adapter selon ses besoins:

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.embed-responsive-16by9::before {
    padding-top: 56.25%;
}
.embed-responsive::before {
    display: block;
    content: "";
}
.embed-responsive .embed-responsive-item{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

Entourer ses balises googlemap

Ici, j’entoure toutes mes balises google map d’une balise paragraphe afin de les centrer dans mon conteneur.

jQuery(document).ready(function(){ 
  jQuery('iframe[src*="google.com/maps/"],iframe[src*="google.fr/maps/"] ').wrap('<p class="align-center"/>');
  
});