La balise <iframe> (de l'anglais Frame : "Cadre" en français), est utilisé assez largement sur Internet, pour afficher le contenu d'une page web dans une autre. Utiliser des balises <iframe> sur son site Internet, permet notamment l'inclusion de vidéos depuis Youtube, même si cette méthode tend à se faire remplacer progressivement par la nouvelle balise <video> (HTML5), jugée plus "W3C friendly".

Ceci étant, vous n'avez pas toujours le choix (entre <video> et <iframe>) et il peut s'avérer utile de connaitre la seule manière de les rendre "responsive" (taille variable, généralement définie en pourcentages, adaptée à toutes les plateformes). 

Etant donné que les propriétés de largeur et hauteur d'une iframe ne peuvent pas être déterminées par des valeurs en pourcentage, voici comment procéder :

Dans une feuille de style CSS chargée pour la page concernée :

.conteneur
{
position: relative;
}

.conteneur iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


En Html :

<div class="conteneur">
<iframe> sans les propriétés width et height déterminées par le conteneur parent... </iframe>
</div>