Comment rendre un embed/iframe video parfaitement responsive

Gilles Van Eylen -

Tous les iframes vidéo dans Qualifio s'adapteront automatiquement à la largeur de l'écran.
Cependant, vous aurez une différence entre les iframes vidéo ajoutés comme 'multimédia' dans une réponse et les iframes vidéo que vous ajouterez manuellement dans votre écran d'accueil (ou de fin).

La vidéo que vous ajouterez dans votre écran d'accueil (ou de fin) sera responsive mais vous constaterez que des bordures noires apparaîtront en haut et en bas de votre video lorsque celle-ci se redimensionnera :

video.jpg

Le comportement responsive attendu :

video2.jpg

Votre écran d'accueil (ou votre écran de sortie) avec votre embed vidéo devrait pour l'instant ressembler à ceci :
Notez le <p> autour de l'iframe vidéo. Il n'a pas d'importance : chaque élément ajouté dans l'éditeur est automatiquement inclu dans un paragraphe (<p>) une fois que vous enregistrerez votre étape.


intro-video.jpeg

Problème: Ce code iframe seul ne suffit pas à permettre à votre vidéo de se redimensionner parfaitement.

Techniquement, voici ce qu'il manque autour de votre iframe :

<div class="embedresize">
<div>
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/O209XqBZVE0" width="560"></iframe>
</div>
</div>

Votre embed vidéo dans l'écran d'accueil devrait à présent ressembler à ceci :
resize.jpeg


Et avec ceci, ajoutez ces quelques lignes de code CSS :
Collez le code suivant dans l'étape Apparence, dans l'accordéon CSS

.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;
}

css.jpeg 

 

 

Réalisé par Zendesk