Commentaire: Lorsque j'ai codé le thème Elemin (un site réactif que j'ai conçu récemment), l'un des saut de cadre que j'ai rencontrés était de faire des vidéos intégrées en taille plus flexibles; Grâce à des heures de recherche de données et d'expériences, j'ai finalement trouvé une solution
Lorsque j'ai codé le thème Elemin (un site réactif que j'ai conçu récemment), l'un des sauts de trame que j'ai rencontrés était de faire des vidéos intégrées en taille plus flexibles. Utilisation de la largeur maximale: 100% et hauteur: Auto peut faire en sorte que la balise vidéo HTML5 fonctionne bien, mais cette solution ne fonctionne pas avec le code en ligne pour les balises IFRAME ou objet. Après plusieurs heures de recherche de données et d'expériences, j'ai finalement trouvé une solution. Cette technique CSS est utile lorsque vous faites un design réactif.
Tag vidéo html5 flexible
En utilisant la vidéo de HTML5, vous pouvez la rendre flexible en définissant la largeur maximale: 100%. Dans l'introduction précédente, il a été mentionné qu'il n'est pas applicable à des iframes et des codes intégrés couramment utilisés dans des objets.
vidéo {
largeur maximale: 100%;
Hauteur: Auto;
}
Vidéos intégrés d'objet flexible et iframe
Cette astuce est assez simple, vous devez ajouter un conteneur <v> à la vidéo et définir la valeur de propriété de rembourrage du div entre 50% et 60%. Réglez ensuite la largeur et la hauteur de l'élément enfant (ifame ou objet) à 100% et utilisez un positionnement absolu. Cela oblige l'objet intégré à se développer automatiquement au maximum.
CSS
.video-container {
Position: relative;
Padding-Bottom: 56,25%;
Tableau de rembourrage: 30px;
hauteur: 0;
débordement: caché;
}
.video-container iframe,
objet .video-container,
.Video-Container Embed {
Position: absolue;
en haut: 0;
à gauche: 0;
Largeur: 100%;
hauteur: 100%;
}
Html
<div>
<iframe src = "http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" frameborder = "0"> </ iframe>
</div>
Atteindre la flexibilité à la largeur fixe
Si la largeur de la vidéo est limitée, nous avons besoin d'un conteneur <v> supplémentaire pour envelopper la vidéo et définir une largeur fixe et une largeur maximale: 100% pour la div.
CSS
.video-wrapper {
Largeur: 600px;
largeur maximale: 100%;
}
Html
<div>
<div>
<iframe src = "http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" frameborder = "0"> </ iframe>
</div>
<! - / vidéo ->
</div>
<! - / Video-Wrapper ->
compatibilité
Cette astuce prend en charge tous les navigateurs, notamment: Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone et iPad.