Si vous souhaitez présenter des vidéos sur votre site web WordPress, utilisez un popup vidéo pour le faire avec style ! Un popup (également appelé overlay ou modal) attire l’attention sur le contenu de la vidéo. Plutôt que d’être affichée sur la page, la vidéo est mise en avant, où elle est au centre de l’attention.
Ne pouvez-vous pas simplement intégrer une vidéo YouTube ?
Intégrer une vidéo de YouTube ou Vimeo dans une page WordPress est facile. Grâce à la fonction « auto-embed » de WordPress, tout ce que vous avez à faire est de coller l’URL de la vidéo dans l’éditeur de WordPress. Lorsque vous publierez la page ou l’article, la vidéo apparaîtra sur la page.
Cette méthode présente toutefois quelques inconvénients. Si un visiteur souhaite agrandir la vidéo, sa seule option est de cliquer sur le lien « Regarder sur YouTube ». C’est une bonne chose pour YouTube, mais pas pour vous. Cela éloigne le visiteur de votre site.
Pire encore, l’intégration d’une vidéo crée une connexion avec le site de la vidéo et charge un aperçu. Cela augmente le temps de chargement de la page (Video page de garde). Nous devrions faire tout ce qui est en notre pouvoir pour réduire le temps de chargement des pages, et non pas charger des éléments qui ne seront peut-être pas utilisés.
Une fenêtre contextuelle vidéo résout ce problème. En utilisant le plugin WP Video Popup, la vidéo s’ouvre au-dessus du reste du contenu de la page. Elle ne peut pas être manquée. Idee page de garde histoire. De plus, elle ne crée pas de connexion au site vidéo tant que le visiteur n’a pas ouvert la fenêtre contextuelle – plus de chargement d’éléments de page inutiles.
Le plugin nous permet de faire apparaître une vidéo lorsque le visiteur clique sur un « déclencheur ». Le déclencheur peut être un lien, un bouton, une image – n’importe quel élément auquel vous pouvez ajouter une classe CSS.
La version pro du plugin propose également une option permettant de lire la vidéo lorsqu’un visiteur charge une page. Cependant, la lecture automatique n’est pas toujours une bonne expérience pour l’utilisateur (et Google ne l’apprécie pas). Nous allons donc nous concentrer sur la création de popups que votre visiteur choisira d’ouvrir.
Installons le plugin et apprenons à créer des fenêtres contextuelles pour les vidéos YouTube et Vimeo.
Installation du plugin WP Video Popup
Connectez-vous à votre panneau d’administration WordPress.
Dans la colonne de navigation de gauche, cliquez sur le lien « Plugins » et cliquez sur le lien « Ajouter un nouveau ».
Dans le champ « Search plugins… », entrez « WP Video Popup ».
Une fois le plugin localisé, cliquez sur le bouton « Installer maintenant ».
Cliquez sur le bouton « Activer ».
Utilisation de WP Video Popup
Il n’y a pas d’installation ou de configuration nécessaire pour utiliser le plugin. Il suffit d’ajouter le shortcode à une page ou à un article.
Voici le code court :
Voici ce que cela donne avec l’URL d’une vidéo YouTube :
Ajoutons donc ce shortcode avec l’URL de la vidéo à une page : (Idee page de garde math). Je vais ouvrir la page d’exemple pour l’éditer, et coller le shortcode dans un bloc de shortcode.
Si vous n’utilisez pas l’éditeur WordPress Gutenberg, collez le shortcode dans la page en utilisant l’éditeur classique.
La deuxième étape consiste à ajouter un déclencheur qui fera apparaître la vidéo (Idée page de garde). Le déclencheur est une classe CSS (wp-video-popup) ajoutée à un lien, un bouton, une image, etc.
Il peut sembler inhabituel d’utiliser une classe CSS pour déclencher une action, mais ce n’est pas aussi compliqué que cela en a l’air.
Nous utiliserons un bouton pour déclencher la fenêtre contextuelle.
Dans la section « Options pour le déclencheur vidéo » ci-dessous, je vous montrerai d’autres façons de déclencher la fenêtre contextuelle (Idée page de garde svt). Aussi, comment ajouter un déclencheur en utilisant l’éditeur classique de WordPress.
Ajoutez un bloc de boutons et entrez le texte du bouton.
Lorsque le bloc de boutons est ouvert, faites défiler vers le bas jusqu’à la section « Avancé » dans la colonne de droite.
Dans le champ « Additional CSS Class(es) », collez la classe de déclenchement, wp-video-popup .
Sauvegardez la page, et le bouton sera affiché.
Cliquez dessus, et la fenêtre contextuelle de la vidéo entre en action.
Pour faire apparaître une vidéo Vimeo, les étapes sont les mêmes. Il suffit d’utiliser une URL Vimeo là où nous avons utilisé l’URL YouTube ci-dessus.
Options pour le Shortcode Vidéo Popup
Il y a plusieurs choses utiles que vous pouvez faire avec les options du shortcode.
Couper le son
Vous ne souhaitez probablement pas couper le son de votre vidéo lorsqu’elle démarre, mais dans certains cas, vous devrez le faire. Certains navigateurs ne lisent automatiquement la vidéo que si elle est mise en sourdine (Video page de garde art plastique). Vous devez donc choisir entre le son et la lecture automatique.
Si la vidéo ne se lit pas automatiquement dans le navigateur de votre choix, essayez d’ajouter l’option de mise en sourdine à votre shortcode :
Afficher uniquement les vidéos de votre chaîne dans les « Vidéos associées »
À la fin de la plupart des vidéos YouTube, une liste de vidéos connexes est affichée. Vous ne pouvez pas désactiver cette fonctionnalité, mais vous pouvez faire en sorte qu’elle n’affiche que les vidéos de votre chaîne.
Sauter le début d’une vidéo
Il arrive que vous souhaitiez démarrer une vidéo à un certain moment. Pour ce faire, ajoutez l’option start. La valeur est exprimée en secondes : (Video page de garde histoire). Ainsi, pour démarrer une vidéo au bout d’une minute, vous devez saisir 60.
Utilisation de plusieurs options
Vous pouvez combiner les options popup dans un shortcode.
Options pour le déclencheur vidéo
Dans l’exemple ci-dessus, nous avons placé le déclencheur de notre fenêtre contextuelle vidéo dans un bouton. Mais il peut également être placé dans d’autres éléments.
Déclencheur avec texte
N’importe quelle section de texte peut être sélectionnée pour créer un lien vers une fenêtre contextuelle vidéo.
Sélectionnez le texte dans l’éditeur.
Ensuite, comme nous l’avons fait pour le bouton, descendez jusqu’à la section « Avancé ».
Dans le champ « Additional CSS Class(es) », collez la classe de déclenchement, wp-video-popup .
Sauvegardez maintenant la page.
Notez que vous ne créez pas de lien avec cette méthode : (Video page de garde physique chimie). Il n’y aura donc aucune indication visuelle que le texte est un lien. Vous pouvez souligner le texte avec HTML ou CSS pour rester cohérent avec les autres liens de votre site.
Déclencher avec une image
Ajoutez une image à votre page.
Ensuite, comme nous l’avons fait dans les exemples précédents, descendez jusqu’à la section « Advanced ».
Collez la classe de déclenchement, wp-video-popup, dans le champ « Additional CSS Class(es) ».
Sauvegardez la page.
Il y a maintenant une image cliquable sur votre page qui ouvrira une fenêtre contextuelle vidéo.
Là encore, il n’y a pas d’indication visuelle pour inciter le visiteur à cliquer sur l’image. Vous devriez ajouter du texte, une légende d’image ou même une sorte de texte « cliquez ici » sur l’image elle-même.
Comme vous l’avez sans doute remarqué, tout élément auquel vous pouvez ajouter une classe CSS peut être un déclencheur.
Définir des déclencheurs dans l’éditeur classique de WordPress
Le concept est le même : nous ajoutons une classe CSS à un élément. Video page de garde svt. Mais cela se fait à différents endroits dans l’éditeur classique de WordPress.
Ajout de la classe CSS Trigger au texte dans l’éditeur classique
Pour ajouter une CSS au texte, nous devons quitter l’éditeur visuel et passer à l’éditeur de texte.
Maintenant, nous allons envelopper le texte que nous voulons déclencher la vidéo dans une balise span. Donc :
Lions-nous à une fenêtre contextuelle vidéo.
Cela devient :
Nous ajoutons ensuite notre classe de déclenchement :
Publiez la page et le texte déclenchera le popup vidéo.
Ajouter la classe de déclenchement à un bouton dans l’éditeur classique
Nous pouvons ajouter la classe à un bouton comme suit :
Ajout de la classe de déclenchement aux images dans l’éditeur classique
Vous n’avez pas besoin de passer à l’éditeur de texte pour celui-ci.
Insérez une image dans votre page et cliquez sur l’image dans l’éditeur.
Cliquez sur l’icône « Modifier ».
Dans la fenêtre « Détails de l’image », trouvez la section « Avancé » et entrez la classe de la fenêtre dans le champ « Classe CSS de l’image ».
Lorsque vous enregistrez la page, l’image cliquable est là.
N’oubliez pas d’ajouter du texte ou une autre indication que l’image est cliquable.
Que se passe-t-il si vous désinstallez le plugin WP Video Popup ?
Si vous désinstallez le plugin, les pages et les articles qui l’utilisaient seront affectés. Les problèmes sont les suivants :
- Votre lecteur YouTube ne fonctionnera plus.
- Les shortcodes du plugin cesseront de fonctionner, de sorte que les shortcodes eux-mêmes seront affichés partout où ils ont été utilisés.
Règles de la vidéo
J’ai expliqué comment la présentation d’une vidéo dans une fenêtre contextuelle peut accélérer le chargement de vos pages et inciter les visiteurs à rester sur votre site. VidÃo page de garde espagnol. L’utilisation du plugin WP Video Popup permet d’ajouter facilement une vidéo à votre site web de la bonne manière. J’espère que ce tutoriel vous donnera envie d’ajouter une vidéo à votre site WordPress.
Ou pour en ajouter d’autres !
Avez-vous déjà utilisé la fonction « auto-embed » de WordPress ? Si vous êtes passé de l’intégration aux popups, avez-vous remarqué une amélioration des performances ? Faites-le moi savoir dans les commentaires.
