Lorsque vous intégrez normalement une vidéo sur un site, la taille d'image est indiquée dans le code et il s'avère que lorsque vous changez la résolution de l'écran, sur différents appareils la vidéo intégrée sur le site s'affiche sans tenir compte de l'écran, comme si vous l'aviez ouvert sur l'hébergement vidéo lui-même.
Notre tâche est de nous assurer que lorsque la taille de la page change, l'image vidéo change automatiquement de taille. Lors de l’ouverture du site depuis différents appareils, la vidéo s’ajustera à la taille de l’écran.
Ce manuel a été testé avec YouTube et l'application MediaCMS.
Par défaut, vous recevez un lien du type :
<iframe width="560" height="315" src="https://synay.dev/embed?m=d0xUIusUo" frameborder="0" allowfullscreen></iframe>
Pour que la vidéo s'ajuste automatiquement, apportons ce code au formulaire :
<div class="container">
<iframe src="https://synay.dev/embed?m=d0xUIusUo"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
Comme vous pouvez le voir, nous avons supprimé les tailles fixes et ajouté 2 classes CSS : conteneur et vidéo.
Nous devons maintenant ajouter ces classes dans le fichier de style de notre site :
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
L'élément conteneur reçoit une hauteur nulle et un pourcentage de remplissage inférieur. Le pourcentage de remplissage inférieur correspond à un pourcentage de la largeur du conteneur, il a donc un rapport hauteur/largeur fixe. Mais pour que l'iframe soit affichée dans un conteneur de hauteur nulle, nous devons rendre le conteneur relatif et l'iframe absolu en le positionnant à l'intérieur d'un div.
N'oubliez pas d'ajouter la version au chemin de votre fichier CSS afin que lorsque vous l'ouvrirez à nouveau, le fichier de style réel soit chargé, et non la version en cache précédemment enregistrée par le navigateur.
Exemple:
<link rel="stylesheet" href="https://domain.tld/css/style.min.css?_v=202408222001">
Désormais, votre vidéo intégrée s'adaptera automatiquement à la taille de l'écran ou à la taille de la fenêtre du navigateur.