Intégration responsive

Pour une intégration totalement réactive de votre iframe, vous pouvez l’encapsuler dans un élément DIV en lui appliquant un style approprié. L’important est d’appliquer la valeur « padding-top » correspondant au rapport d’image de votre vidéo.

Vous pouvez déclarer un ensemble de rapports d’aspect (« aspect ratio ») les plus courants et convertir la valeur du paramètre aspect_ratio renvoyée par un webservice pour appliquer dynamiquement le style approprié.

Dans l’exemple ci-dessous, si le rapport largeur/hauteur de la vidéo est de 1,77, le style appliqué à votre élément DIV sera class= »resp resp-1-77″:

<style type="text/css">
.resp {
position: relative;
overflow: hidden;
}
.resp-2-33 { /* 21:9 */
padding-top: 42.85%;
}
.resp-2-00 { /* 2:1 */
padding-top: 50%;
}
.resp-1-77 { /* 16/9 */
padding-top: 56.25%;
}
.resp iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>

<div class="resp resp-1-77">
<iframe src="https://cdn.streamlike.com/play?med_id=xxxxxxxxxxx" mozallowfullscreen webkitallowfullscreen allowfullscreen allow="autoplay; fullscreen"></iframe>
</div>

Vous pouvez aussi générer dynamiquement le style en ligne. Dans ce cas, la valeur « padding-top » sera 1 / aspect_ratio, formaté en pourcentage.

Exemples :

• A partir d’un webservice, vous obtenez aspect_ratio=1.77
• Vous calculez 1 / aspect_ratio = 0,5625
• La seule partie variable de votre style est « padding-top:56.25% ». Toutes les autres propriétés du style sont constantes.

<div style="position: relative; overflow: hidden; padding-top:56.25%;">
<iframe src="https://cdn.streamlike.com/play?med_id=xxxxxxxxxxx" mozallowfullscreen webkitallowfullscreen allowfullscreen allow="autoplay; fullscreen; picture-in-picture" style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;"></iframe>
</div>

Vous pouvez également intégrer vos vidéos à l’aide de scripts.

Insérez d’abord une DIV à l’endroit où vous souhaitez que le lecteur apparaisse, puis insérez une référence à un script utilitaire et un script qui associe un identifiant de média au lecteur.

Voici un exemple de code :

<div id="slPlayer"></div>
<script type="text/javascript" src="https://assets.streamlike.tv/common/js/sl5-utils.js"></script>
<script type="text/javascript" src="https://assets.streamlike.tv/common/js/sl5-utils_ie.js"></script>
<script type = "text/javascript">
var ua = window.navigator.userAgent;
if ((ua.indexOf('MSIE ') > -1) || (ua.indexOf('Trident/') > -1)) {
sl = StreamlikeIE; //IE
}
else{
sl = new Streamlike(); //Not IE
}
sl.setResponsiveIframe("slPlayer", "xxxxxxxxxx");
</script>