T.V
- 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 :
Le comportement responsive attendu :
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.
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 :
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;
}