How to make my embed video perfectly responsive

Gilles Van Eylen -

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 :

video.jpg

The expected responsive behavior :

video2.jpg

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 the manager once the step is saved.


intro-video.jpeg

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 :
resize.jpeg

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

css.jpeg 

 

 

Powered by Zendesk