Le guide complet Beaver Builder + Swarmify pour l'hébergement vidéo

Utilisez-vous Beaver Builder ? Si tel est le cas, Swarmify vous aide à proposer des expériences vidéo rapides, sans tampon et professionnelles sur votre site Web sans vous ruiner.

Propulsant plus d'un million de sites Web, Beaver Builder est un constructeur de pages par glisser-déposer populaire parmi les utilisateurs de WordPress.

Le constructeur de pages est incroyablement facile à utiliser, mais il est doté d'un ensemble unique de fonctionnalités qui l'ont fait aimer des débutants comme des experts.

Par exemple, j'ai obtenu la page suivante en moins de cinq minutes :

Il s'agit essentiellement d'un modèle prêt à l'emploi que vous pouvez importer en quelques secondes. Ensuite, remplacez les images et le texte par votre contenu, et vous êtes opérationnel.

Si vous n'aimez pas les modèles Beaver Builder, vous êtes libre de commencer avec une page vierge. Ensuite, faites glisser et déposez les blocs de contenu en place et forgez visuellement le reste de votre page sans écrire de code HTML ni vous débattre avec des codes abrégés.

Dans le passé, nous avons couvert d'autres constructeurs de pages tels que Divi, Elementor, Brizy et Webflow. Veuillez consulter les guides chaque fois que vous le pouvez :)

Aujourd'hui, nous vous montrons exactement comment utiliser Beaver Builder et Swarmify pour offrir des expériences vidéo rapides, sans blocage et professionnelles sur votre site Web.

Sans plus tarder, commençons car il y a beaucoup à apprendre.

Qu'est-ce que Beaver Builder ?

Avant toute chose, apprenons-en plus sur Beaver Builder pour le plaisir du premier temporisateur parmi nous.

Beaver Builder est un constructeur de pages WordPress premium. L'outil vous aide à créer visuellement des pages WordPress réactives.

Cela signifie que vous créez des pages en faisant glisser et en déposant des blocs de contenu. Vous n'avez pas besoin d'expérience préalable en codage pour utiliser le générateur de page Beaver Builder.

C'est une excellente nouvelle pour les débutants et les professionnels, car vous pouvez rationaliser votre flux de travail et gagner beaucoup de temps lors de la création de sites Web.

Les plus grands noms de WordPress aiment et font confiance à Beaver Builder :

La meilleure partie de Beaver Builder est le fait qu'il est si remarquablement facile à utiliser que vous créerez des sites Web WordPress en quelques heures et non en quelques jours.

Et être facile à utiliser ne signifie pas que Beaver Builder n'est pas aussi puissant que les autres constructeurs de pages. C'est un constructeur de pages robuste grâce à une longue liste de fonctionnalités astucieuses.

Fonctionnalités, dites-vous ?

Oui, Beaver Builder se vante des fonctionnalités suivantes :

• Conception 100 % réactive, ce qui signifie que vos pages auront fière allure sur plusieurs appareils
• Beaver Builder Theme Framework pour tous vos projets WordPress
• Des dizaines de modèles prédéfinis pour créer des pages de destination, des pages d'accueil, des pages de contenu, etc.
• Beaver Builder Générateur de pages par glisser-déposer
• Des tas de blocs de contenu pour ajouter du texte, des images, des boutons, des titres, des vidéos, etc.
• Une tonne de widgets WordPress, dont le widget SmartVideo
• Paramètres globaux
• HTML, CSS et JavaScript personnalisés si nécessaire
• Raccourcis clavier
• Beaver Themer Add-on pour personnaliser chaque partie de votre site Web, y compris les en-têtes et les pieds de page
• Contrôle total sur la conception de votre site Web
• Compatible avec une large gamme de thèmes WordPress
• Une version gratuite disponible en plugin sur WordPress.org
• Assistance de classe mondiale
• Capacité multisite
• Marque blanche
• Etc

Beaver Builder est un puissant constructeur de pages qui facilite la création de sites Web WordPress beaux et réactifs. Si c'est votre première fois, vous pouvez essayer la version gratuite et passer à un plan pro plus tard.

Ils proposent trois forfaits tarifaires parfaits pour les propriétaires de sites débutants, les pigistes professionnels et les agences de création. Tous les forfaits vous permettent d'utiliser Beaver Builder sur un nombre illimité de sites Web.

Maintenant que nous sommes tous sur la même page, passons à la SmartVideo de Swarmify.

Qu'est-ce que Swarmify SmartVideo ?

Swarmify est une société d'accélération vidéo qui vise à offrir à tous un streaming de qualité Netflix dans un package simple. Notre plate-forme SmartVideo simplifie toutes les pièces mobiles complexes et coûteuses qui entourent le déploiement vidéo.

SmartVideo gère automatiquement le téléchargement, l'encodage, l'hébergement et diffuse vos vidéos, quel que soit l'endroit où vous les stockez, que ce soit YouTube, Dropbox, Amazon S3, Google Cloud, etc.

Pourquoi Swarmify SmartVideo ?

La plateforme Swarmify SmartVideo aide les entreprises à résoudre certains des problèmes les plus difficiles du streaming vidéo : la mise en mémoire tampon et la qualité du streaming. SmartVideo empêche également les likes de YouTube de siphonner votre trafic en utilisant des lecteurs vidéo chargés de liens.

Grâce à notre solution de diffusion, vous pouvez diffuser des vidéos 12 fois plus rapidement que la moyenne des acteurs du secteur . La même plate-forme de livraison vous aide également à réduire les décrochages de 8 fois .

"Swarmify SmartVideo a été lancé en mai 2017. Nous avons connu une croissance énorme chaque mois. De plus en plus d'entreprises reconnaissent le coût réel de l'utilisation de YouTube. Avant SmartVideo, notre solution n'était disponible que pour les grandes entreprises. Au total, nous avons récemment célébré le streaming de plus de cinq cents millions de vidéos », déclare Nathan Barnett, PDG de Swarmify. "Si votre site Web se charge rapidement, mais que votre vidéo se charge lentement, vous allez toujours perdre ce client." Source : YourStory.com

SmartVideo vous aide à diffuser des vidéos rapides, sans tampon et de haute qualité sur votre site Web Beaver Builder. Nous vous proposons un lecteur vidéo sans encombrement qui ne contient aucun lien ni marque tierce, vous permettant d'offrir des expériences vidéo professionnelles aux visiteurs de votre site Web.

Voici quelques-unes des fonctionnalités qui font de SmartVideo la meilleure plateforme d'accélération vidéo.

• Lecteur vidéo propre et sans distraction - YouTube et d'autres plates-formes encombrent leur lecteur de liens pour siphonner votre trafic. Le lecteur SmartVideo est propre, personnalisable et sans fuite.
• Conversions YouTube et Vimeo automatiques - Si vous utilisez déjà des vidéos YouTube ou Vimeo sur votre site Beaver Builder, SmartVideo convertira automatiquement toutes les vidéos dès que vous installerez notre plugin WordPress.
• Optimisé sur chaque appareil, ce qui signifie que vos vidéos peuvent être visionnées sur n'importe quel appareil et navigateur.
• Bande passante et stockage illimités
• Lecture rapide, sans tampon et anti-décrochage
• Assistance continue fournie par des développeurs super talentueux et sympathiques
• Structure de tarification simple sans contrats louches
• Analyse de l'engagement vidéo
• CDN vidéo mondial pour fournir des vidéos ultra-rapides aux utilisateurs, où qu'ils se trouvent dans le monde
• Etc.

Swarmify SmartVideo change la donne dans le domaine de l'accélération vidéo. Nous apportons beaucoup d'expérience de travail et d'expertise à la table.

En outre, l'installation de SmartVideo sur votre site Web Beaver Builder est incroyablement facile, comme vous l'apprendrez dans la section suivante. Mais si jamais vous êtes bloqué, vous pouvez toujours nous contacter :) Nous sommes toujours ravis de vous aider.

Agissant rapidement, laissez-nous installer SmartVideo sur votre site Web Beaver Builder.

NB : Pour la section suivante, vous aurez besoin d'un compte Swarmify actif. Vous n'avez pas encore de compte? Créez-en un aujourd'hui et profitez de votre réduction exclusive de 50 %.

Comment intégrer Swarmify SmartVideo à un site Web Beaver Builder

Puisque Beaver Builder fonctionne avec WordPress, nous utiliserons le plugin gratuit SmartVideo. Après avoir créé votre compte Swarmify, téléchargez le plugin SmartVideo WordPress sur votre ordinateur.

Ensuite, connectez-vous à votre tableau de bord d'administration WordPress et accédez à Plugins > Ajouter un nouveau , comme indiqué ci-dessous.

Ensuite, cliquez sur le bouton Télécharger le plugin , sélectionnez le plugin SmartVideo sur votre ordinateur et cliquez sur Installer maintenant :

Après cela, activez le plugin :

Nous n'en sommes pas encore là - il est temps de connecter votre site Web à votre compte Swarmify.

Comment?

Cliquez sur SmartVideo dans votre menu d'administration WordPress, comme nous le soulignons ci-dessous.

Sur le tableau de bord SmartVideo, cliquez sur le bouton Configurer :

Cela vous amène à la page de configuration suivante, qui contient des instructions et un GIF interactif montrant exactement ce que vous devez faire ensuite.

Mais pour vous éviter les ennuis, connectez-vous rapidement à votre compte Swarmify et copiez la clé CDN Swarm en haut :

Revenez à votre page de configuration SmartVideo dans WordPress, faites défiler vers le bas, collez la clé CDN Swarm et cliquez sur Activer SmartVideo , comme indiqué ci-dessous.

C'est assez simple; Je ne m'attends pas à ce que vous rencontriez des difficultés. Une fois cela fait, vous devriez voir l'étiquette verte Enabled en haut :

Avant d'apprendre comment ajouter une vidéo SmartVideo à votre site Web Beaver Builder, couvrons certains des paramètres SmartVideo disponibles sur la page ci-dessus.

Cliquez sur l'onglet Paramètres , comme nous le soulignons dans la capture d'écran ci-dessous.

Cela mène à la page de paramètres suivante.

Passons brièvement en revue chaque section. J'ai numéroté les sections de manière appropriée pour votre plaisir.

(1) Tout en haut, vous avez la possibilité d'activer ou de désactiver SmartVideo. Évidemment, vous voulez garder SmartVideo toujours activé pour garantir les meilleures performances.

(2) Options de base

Vous avez la deuxième section avec quelques options de base pour personnaliser votre lecteur et votre expérience SmartVideo. Les options disponibles incluent :

• Activer ou désactiver les conversions automatiques YouTube et Vimeo - Cochez la case pour convertir automatiquement les vidéos YouTube et Vimeo déjà sur votre site. Allumez et laissez comme ça.
• Afficher les sous-titres codés lorsqu'ils sont disponibles à partir de sources YouTube : à moins que cela ne soit essentiel, laissez cette case décochée.
• Optimiser les vidéos d'arrière-plan et les vidéos existantes - Activez cette option et SmartVideo optimisera les vidéos existantes et les vidéos d'arrière-plan. Allumez et laissez comme ça.
• Changer la forme du bouton de lecture - auto-explicatif. Vous avez le choix entre trois formes : Par défaut (ou Hexagone ), Rectangle et Cercle . Choisissez celui que vous préférez. La forme par défaut me convient :)
• Choisissez une couleur pour faire correspondre les composants du lecteur vidéo avec les couleurs de votre site Web - Encore une fois, vous avez la possibilité de personnaliser l'apparence de votre lecteur vidéo sur votre site. Choisissez votre couleur personnalisée à partir d'ici :)

En dessous, nous avons...

(3) Options avancées

Lorsque vous chargez la page des paramètres, la section Options avancées est réduite. Cliquez sur le titre pour charger la section, qui vous offre les options suivantes.

• Activer ou désactiver la méthode de mise en page alternative - Cette option est pratique si vous rencontrez des problèmes de taille de vidéo étranges ou de plein écran. Cochez la case.
• Activer ou désactiver l'accélération de téléchargement - Si vous rencontrez des problèmes avec vos téléchargements de vidéos, activez cette option.
• (Plan Pro uniquement) Définir un filigrane - Ici, vous pouvez définir une image ou un logo comme filigrane pour le lecteur vidéo. C'est idéal à des fins d'image de marque, alors utilisez votre meilleure image/logo.
• (Plan Pro uniquement) Ajouter l'URL de l'annonce VAST - C'est ici que vous entrez l'URL de votre annonce si vous cherchez à monétiser vos vidéos avec des publicités d'AdSense, DFP, SpotX, etc.

Une fois que vous avez les bons paramètres, n'oubliez pas de cliquer sur Enregistrer les paramètres en bas de la page.

Avec cela à l'écart, ajoutons une vidéo intelligente à votre page Beaver Builder.

Comment ajouter SmartVideo à une page Beaver Builder

J'utilise la même page que vous avez montrée plus tôt à des fins d'illustration. Je remplacerai l'image marquée en haut par une SmartVideo :

J'ai emprunté la vidéo SpaceX Launches sur la chaîne YouTube de SpaceX. C'est la même vidéo dans notre démo (vérifie s'il te plaît).

NB : Si YouTube est votre source, assurez-vous d'utiliser le lien d'intégration (c'est-à-dire https://www.youtube.com/embed/gmJgW-yMAIg ) au lieu du lien de surveillance directe (c'est-à-dire https://www. youtube.com/watch?v=gmJgW-yMAIg ).

Pour trouver le lien d'intégration, allez sous la vidéo et cliquez sur le bouton Partager :

Après cela, cliquez sur le bouton Intégrer , comme indiqué ci-dessous.

Ensuite, allez dans la fenêtre contextuelle qui apparaît et copiez le lien d'intégration, comme nous le soulignons ci-dessous.

Voir? Ce n'était pas si difficile.

NB : Une autre chose, si vous recherchez des vidéos à partir de votre chaîne YouTube et que vos vidéos sont définies sur " privées ", modifiez-les en " non répertoriées ".

Avec ce préambule, allons-y.

Ouvrez votre page dans Beaver Builder :

Puisque je remplace l'image, je dois d'abord la supprimer en cliquant sur l'icône Supprimer comme suit :

Ce qui me laisse avec une colonne vide :

Conseil de pro : vous pouvez ignorer l'étape ci-dessus si vous ne remplacez pas une image comme dans mon cas. Assurez-vous simplement d'avoir une colonne ou une ligne vide où vous ajoutez votre vidéo. Si vous avez déjà utilisé Beaver Builder, cela ne devrait pas poser de problème.

Ensuite, cliquez sur l'icône ajouter un module de contenu ( + ) plus en haut :

Après cela, faites glisser et déposez le bloc de contenu SmartVideo à l'endroit où vous souhaitez placer la vidéo :

Faire glisser et déposer le module SmartVideo fait apparaître la jolie petite boîte ci-dessous.

Cette box permet de faire beaucoup de choses. Par exemple, il vous permet de choisir votre source vidéo et de contrôler quelques options de base et avancées - plus à ce sujet dans une minute.

Ensuite, cliquez sur Source vidéo , choisissez YouTube , collez votre code d'intégration et appuyez sur Enregistrer , dans cet ordre :

Agréable. Vous pouvez déjà voir le bouton de lecture hexagonal jaune et le lecteur vidéo avant même de cliquer sur Enregistrer.

Cliquez sur Terminé en haut puis sur Publier :

Conseil de pro : vous pouvez enregistrer le brouillon si vous travaillez toujours sur la page.

Si je vérifie ma vidéo intelligente sur le frontend, je verrai la vidéo dans le lecteur vidéo sans encombrement. La vidéo est déjà optimisée et accélérée par Swarmify, comme vous pouvez le voir ci-dessous.

Pas de marque YouTube, pas de mise en mémoire tampon et pas de liens qui siphonnent votre trafic. Oh oui, il n'y a pas non plus de "vidéos recommandées" lorsque je mets la vidéo en pause. De plus, il se charge assez rapidement :)

Mais cela semble étrangement petit, mais c'est parce que je n'ai pas changé la largeur de ma colonne dans Beaver Builder. Vous pouvez modifier la largeur de vos colonnes et déplacer les éléments jusqu'à ce que vous obteniez la bonne taille.

J'ai joué avec la largeur de ma colonne et modifié du contenu, et c'est ce que j'ai obtenu"

Pas mal. Plus c'est gros, mieux c'est après tout :)

Parlons maintenant des options de base et avancées que nous avons mentionnées il y a une seconde. Tu sais? Lorsque nous avons ajouté la vidéo et que cette jolie petite boîte est apparue ?

Cliquez à l'intérieur du module de contenu SmartVideo dans Beaver Builder :

Cela vous amène aux options suivantes, où vous pouvez voir les options de base et avancées :

Contrairement aux options de base et avancées que nous avons couvertes lorsque nous avons connecté votre site à votre compte Swarmify, les options ci-dessus vous permettent de personnaliser le comportement du joueur, faute d'un meilleur mot.

C'est ce que je veux dire. Allez-y et cliquez sur Options de base , ce qui vous mène ici :

Regardez ça ! De nombreuses options pour contrôler des éléments tels que la largeur et la hauteur du lecteur vidéo, la lecture vidéo en ligne (idéal pour le navigateur Safari OS) et la conception réactive.

Vous disposez également de commandes telles que la lecture automatique (si vous l'activez, assurez-vous que votre vidéo est automatiquement lue en sourdine) , En sourdine (la vidéo démarre en mode muet) , Boucle (la vidéo continue de se rejouer), et même une pour désactiver les commandes (mais ne le faites pas car les utilisateurs ne pourront pas lire ou mettre en pause ou baisser le volume, ce qui est ennuyeux).

Ensuite, vous avez l'onglet Avancé , qui ressemble à ceci :

Encore une fois, une multitude d'options pour personnaliser encore plus votre lecteur vidéo. Vous ajoutez des animations (faites rebondir cette vidéo lorsque la page se charge), définissez un espacement autour du lecteur vidéo, et bien plus encore.

Encore une fois, comme toujours, n'oubliez pas d'enregistrer vos modifications lorsque vous avez terminé.

Dernières pensées

Beaver Builder est un constructeur de pages assez élégant. C'est puissant au-delà de ce que vous imaginiez au début, mais une fois que vous y êtes et que vous commencez à bricoler, vous réalisez rapidement que vous disposez d'un outil formidable pour créer n'importe quel site Web moderne.

Mais il n'est pas conçu pour l'optimisation vidéo ou même l'accélération ; c'est simplement un constructeur de page. C'est là qu'intervient la solution Swarmify SmartVideo. Nous vous aidons à offrir des expériences vidéo rapides et professionnelles sur vos sites Web Beaver Builder.

Le tout sans les coûts élevés, les limites et les défis techniques qui accompagnent la plupart des hébergeurs vidéo.

Avons-nous oublié quelque chose ? Contactez-nous à tout moment et nous serons heureux de discuter.