How to make my embed video perfectly responsive

All the embedded videos in Qualifio are automatically made responsive.
However, you will see differences between an embed added as 'multimedia' in an answer and an embed that you will manually add in the welcome step or in the exit step.

The video you will add in the welcome step (or in the exit step) will be responsive, but you will note black borders above and under the iframe when it will be resized :

The expected responsive behavior :

Your welcome step (or your exit step) with your embed video should currently look like this :
Note the <p> around the iframe. It doesn't matter: it is automatically added by Qualifio once the step is saved.

Problem: that iframe code alone is in fact not enough to allow the embedded video to react ideally when it needs to resize itself.

Technically, here is what your iframe is missing :

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

Your embed code in the Welcome step should now look like this :


Plus a little bit of CSS :
Copy/paste the following code in the "look and feel" step, in the CSS accordion

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