Il est possible de rendre une iframe responsive.
Dans ce cas, la largeur de la vidéo insérée s'adaptera automatiquement à la largeur de l'écran du périphérique sur lequel le blog est consulté.
Étape 1
Dans le panneau latéral, cliquer sur Feuille se style.
Copier-coller le code suivant dans la zone d'édition :
.embedresize {
max-width: 560px;
margin: auto;
}
.embedresize div {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.embedresize iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.intro #intro .embedresize iframe,
.exit .quizz .embedresize iframe,
.alreadyplayed #intro .embedresize iframe,
.identityset #intro .embedresize iframe,
#notabene .embedresize iframe,
#message_intro .embedresize iframe,
.fancybox_body .embedresize iframe,
#comments .embedresize iframe,
#description .embedresize iframe,
.alreadyplayed .embedresize iframe,
#adserver .embedresize iframe {
max-width: none !important;
}
Cliquer sur Enregistrer.
Étape 2
Dans la page d'édition d'un billet (ou d'une page), basculer vers le mode Source.
À l'emplacement souhaité, copier-coller le code d'intégration iframe de la vidéo.
Entourer ensuite le code iframe avec les balises :
<div class="embedresize">
<div>
et
</div>
</div>
Et voilà ! La vidéo embarquée dans le billet est devenue responsive.
