JQuery pour rendre les vidéos Responsive

Table des matières

La conception Web réactive ou adaptable pour différents appareils, sert à ce que nos conceptions s'adaptent parfaitement à n'importe quel écran d'appareil avec une connexion Internet.
L'utilisation de requêtes multimédias dans CSS3 vous permet de créer des conceptions réactives avec CSS3 Media Queries.
Une requête média se compose d'un type de média et d'au moins une requête qui limite les feuilles de style à l'aide de caractéristiques de média telles que la largeur, la hauteur et la couleur. Ajoutées dans CSS3, les requêtes multimédias permettent à l'affichage du contenu de s'adapter à une gamme spécifique de périphériques de sortie sans avoir à modifier le contenu lui-même.
Les requêtes média se composent d'un type de média et d'une ou plusieurs expressions, impliquant des caractéristiques du média, qui sont résolues comme vraies ou fausses. Le résultat de la requête est vrai si le type de média spécifié dans la requête média correspond au type de périphérique affiché et si toutes les expressions de la requête média sont vraies. Lorsqu'une requête média est vraie, la feuille de style ou les règles de style correspondantes sont appliquées, en suivant les règles de cascade normales.
 

Cette technique responsive peut être utilisée avec tous nos fichiers sur un site web même si le contenu multimédia, pour rendre notre site web plus pratique et accessible à tous les appareils, alors nous pouvons rendre nos vidéos également Responsive, c'est-à-dire auto-ajustables ou adaptables selon l'appareil de sortie.
Pour cela nous avons FitVids.js, c'est un plugin utilisé pour rendre n'importe quelle vidéo responsive, il s'adaptera parfaitement et automatiquement à la taille du conteneur ou du périphérique de sortie, quelque chose de très pratique pour le web design en termes de son contenu à parfaitement visualiser sur les téléphones intelligents et les tablettes.
Vous devez inclure jQuery 1.7 ou version ultérieure et FitVids.js dans la conception de votre page Web et cibler le conteneur vidéo avec fitVids ().

L'utilisation est simple, il suffit d'appeler la fonction fitVids en pointant une vidéo et l'élément est auto-encapsulé avec unet CSS à redimensionner doit être appliqué.
Actuellement, il est compatible avec les principaux services tels que Youtube, Vimeo, Blip.TV ou Viddler
Nous pouvons l'ajouter à wordpress avec une fonction, de sorte que toute classe div .video soit automatiquement redimensionnée.
 }}}} add_action ('init', 'fitvids'); ?> var13 -> 
Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif

Vous contribuerez au développement du site, partager la page avec vos amis

wave wave wave wave wave