Utiliser CSS pour implémenter une vidéo élastique HTML5 Case Practice_html5 Compétences du didacticiel

Lorsque je codais Elemin Theme (un site réactif que j'ai récemment conçu), un saut d'image que j'ai rencontré était de savoir comment rendre les vidéos intégrées plus flexibles dans les changements de taille. L'utilisation de max-width:100% et height:auto peut permettre à la balise vidéo HTML5 de bien fonctionner, mais cette solution ne fonctionne pas pour le code en ligne de balise iframe ou d'objet. Après des heures de recherche et d'expérimentation, j'ai enfin trouvé la solution. Cette astuce CSS est utile lorsque vous effectuez une conception réactive.

Balise vidéo HTML5 flexible
En utilisant la vidéo 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 ne convient pas aux codes intégrés dans les iframes et les objets couramment utilisés.

Copier le code

Le code est le suivant :

vidéo {
max -width: 100%;
hauteur: auto;
}

Objet flexible et vidéo intégrée Iframe
Cette astuce est assez simple, vous devez ajoutez un conteneur

et définissez la valeur de l'attribut padding-bottom du div entre 50 % et 60 %. Définissez ensuite la largeur et la hauteur de l'élément enfant (ifame ou objet) à 100 % et utilisez le positionnement absolu. Cela forcera l'objet incorporé à s'étendre automatiquement jusqu'à sa taille maximale.
CSS

Copier le code

Le code est le suivant :

.video-container {
position : relative ;
padding-bottom : 56,25 % ;
padding-top :
hauteur : 0
débordement : caché ; 🎜>}
.video-container iframe,
.video-container object,
.video-container embed {
position : absolue ;
top : 0 ;
gauche : 0 ; ;
largeur : 100%;
hauteur : 100%
}

HTML

Copiez le codeLe code est le suivant :

src="http:// player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" ​​​​frameborder="0"> 🎜>

Flexibilité sous largeur fixe

Si la largeur de la vidéo est limitée, nous avons besoin d'un conteneur

la vidéo et définissez une largeur fixe pour le div et max-width: 100%. CSS

Copier le code

Le code est le suivant :

.video -wrapper {

largeur : 600px;

largeur maximale :
}


HTML

Copier le code

Le code est le suivant :

-container">