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

Utilisez-vous Webflow ? Si tel est le cas, Swarmify vous offre exactement ce dont vous avez besoin pour offrir des expériences vidéo ultra-rapides et de haute qualité.

Qu'est-ce qu'un bon contenu ? Qu'est-ce qu'une page de destination ? Qu'est-ce qu'un site Web ?

L'époque où la création de sites Web était l'apanage des développeurs Web de dragons cracheurs de feu est révolue.

De nos jours, vous pouvez créer des sites Web incroyables dans le temps qu'il faut au prochain pour finir un sandwich.

Grâce aux constructeurs de sites Web tels que Webflow, vous n'avez pas besoin de savoir quoi que ce soit sur le codage pour créer des sites Web remarquables en un tournemain.

Pour l'article d'aujourd'hui, j'ai créé un exemple de site Web ( vous le verrez dans une minute ) en moins de 30 minutes ! Et je ne suis pas ce que vous appelleriez un développeur web professionnel. Même pas dans mes rêves :)

Des outils tels que Webflow ont supprimé de nombreux obstacles qui empêchaient les personnes non averties en technologie comme vous et moi de créer des sites Web.

À présent...

Si vous utilisez des vidéos sur votre site Web Webflow, vous voulez qu'elles se chargent rapidement et sans calage.

Vous voulez offrir à vos utilisateurs uniquement la meilleure des expériences de visionnage, et rien de moins.

Les vidéos lentes qui se mettent en mémoire tampon pendant la lecture ne feront qu'ennuyer vos visiteurs et les enverront courir vers les collines et directement dans les bras en attente de vos concurrents.

Tu ne veux pas ça parce que tu es intelligent. Aussi, parce que vous avez maintenant à votre disposition la technologie SmartVideo de Swarmify.

SmartVideo vous permet d'offrir des expériences vidéo entièrement personnalisées et professionnelles à vos utilisateurs.

Vous pouvez diffuser des vidéos 12 fois plus rapides que la moyenne des acteurs du secteur. Mieux encore, la solution propriétaire de livraison SmartVideo réduit les décrochages de 8 fois.

Et dans le post d'aujourd'hui, nous vous montrons exactement comment intégrer Swarmify avec Webflow pour accélérer les vidéos pour un meilleur engagement des utilisateurs et plus de ventes !

Sans plus tarder, levons l'ancre et mettons les voiles :)

Qu'est-ce que Webflow ?

Alors, quel est cet animal que nous appelons Webflow ? Pour les non-initiés, Webflow est une société américaine basée à San Francisco.

Ils offrent une plate-forme logicielle en tant que service (SaaS) pour la création et l'hébergement de sites Web, le tout regroupé dans un seul package.

Webflow vous offre un astucieux créateur de site Web par glisser-déposer qui est un jeu d'enfant à utiliser. En plus de cela, ils vous offrent une tonne de fonctionnalités qui rendent la création de sites Web réactifs aussi simple qu'abracadabra.

Lorsque votre site Web est prêt, vous n'avez pas besoin d'aller ailleurs pour l'hébergement Web. Webflow vous offre un hébergement haut de gamme, parfait pour toutes les entreprises, grandes et petites.

De grandes marques telles que Zendesk, Dell, Rakuten et Upwork, entre autres, font confiance à Webflow, ce qui signifie que vous êtes entre de bonnes mains.

Entre vous et moi, je n'ai jamais utilisé un constructeur de site Web aussi intuitif auparavant. Webflow fait complètement sauter des entreprises telles que Weebly, Squarespace et Wix.

Et ils boivent aussi leur propre Kool-Aid. Le site officiel de Webflow est made in, vous l'aurez deviné - Webflow !

Fonctionnalités clés du flux Web

Webflow est populaire et surtout connu pour les fonctionnalités clés suivantes.

• Un constructeur de site Web intuitif par glisser-déposer qui vous permet de créer des sites Web visuellement
• Des dizaines de superbes modèles prêts à l'emploi que vous pouvez personnaliser jusqu'à épuisement
• Des tonnes d'éléments de site Web
• Fonctionnalité de commerce électronique
• Hébergement Amazon S3 ultra-rapide et robuste
• Styles illimités
• Possibilité d'ajouter du code HTML, CSS et JS personnalisé
• Plans tarifaires flexibles
• Puissant système de gestion de contenu (CMS)
• De nombreuses intégrations tierces
• Plan gratuit pour tester les eaux
• De nombreuses interactions et animations
• Connecter le nom de domaine personnalisé
• Utilisez leur sous-domaine, par exemple, swarmify.webflow.io pour héberger un site Web gratuit
• Assistance professionnelle

Si vous êtes un développeur Web frontal (ou simplement un simple débutant) à la recherche d'un créateur de site Web facile à utiliser mais puissant, Webflow est fortement recommandé.

C'est l'outil parfait pour gagner du temps et rationaliser votre journée de travail déjà bien remplie. Si vous êtes un utilisateur existant de Webflow, vous savez déjà que Webflow est un créateur de site Web parfait.

Pourtant, ils ne vous offrent pas les bons outils pour optimiser les vidéos. Si vous utilisez YouTube, le lecteur vidéo de votre site Web Webflow affichera toujours une image de marque YouTube ennuyeuse et des liens qui distraient vos utilisateurs et voleront votre trafic.

Et bien que Webflow utilise un hébergement rapide, les vidéos que vous utilisez à partir de YouTube ou de toute autre source seront mises en mémoire tampon et prendront encore du temps à se charger.

C'est là qu'intervient Swarmify. Nous vous proposons exactement ce dont vous avez besoin pour optimiser les vidéos sur votre site Webflow, que vous utilisiez YouTube, Vimeo ou tout autre site pour héberger vos vidéos.

Qu'est-ce que Swarmify ?

Swarmify a été lancé en 2013 en tant que plateforme d'accélération vidéo. Le service fonctionne sur la même infrastructure que les géants du streaming tels que Netflix et Hulu utilisent.

Vous pouvez stocker vos vidéos où vous voulez et utiliser SmartVideo de Swarmify pour diffuser des vidéos à vos utilisateurs à des vitesses ultra-rapides.

Voici un exemple de scénario pour illustrer ce que je veux dire :

• Téléchargez la vidéo sur YouTube ou Vimeo pour les avantages sociaux et intégrez-la sur votre site Web comme toujours
• Intégrez SmartVideo à votre site Web à l'aide de notre plugin WordPress ou de notre extrait rapide
• SmartVideo télécharge vos vidéos YouTube/Vimeo dans les coulisses et les télécharge sur notre réseau de diffusion mondial
• SmartVideo diffuse vos vidéos désormais plus rapides dans un lecteur vidéo sans encombrement qui a l'air incroyable
• Tout se passe automatiquement en arrière- plan . En fait, SmartVideo convertit automatiquement toutes les vidéos YouTube de votre site Web. Installez une fois et c'est tout !

SmartVideo utilise EdgeAI en interne pour éviter le blocage pendant la lecture, et une solution SmartCDN qui garantit à vos visiteurs de profiter de vidéos rapides et sans tampon partout dans le monde.

Si vous utilisez beaucoup de vidéos, les vitesses lentes peuvent tuer l'engagement et entraîner une baisse des ventes. SmartVideo vous aide à contourner ce problème sans factures énormes ni limites de stockage/bande passante.

Fonctionnalités clés de Swarmify

Les utilisateurs de Swarmify adorent SmartVideo grâce aux fonctionnalités suivantes.

• Lecteur vidéo propre, sans encombrement et sans distraction
• Démarrage instantané - Les vidéos SmartVideo commencent à jouer 12 fois plus vite que les autres lecteurs en moyenne (voir notre démo ici)
• Expérience de visionnage optimisée sur plusieurs appareils
• Conversions YouTube/Vimeo automatiques - Vous hébergez déjà des vidéos sur YouTube ou Vimeo ? SmartVideo les convertit automatiquement
• Optimisation continue du streaming - Tout au long de la lecture, SmartVideo surveille en permanence l'expérience vidéo de chaque utilisateur individuel et prévient les pannes avant qu'elles ne surviennent.
• Lecture sans blocage - SmartVideo vous offre 8 fois moins de mise en mémoire tampon pendant la lecture que les autres lecteurs en moyenne.
• Tout illimité - Profitez d'une bande passante et d'un stockage illimités
• Un support professionnel soutenu par une équipe de développeurs passionnés
• Installation et mise en œuvre faciles
• En savoir plus sur nos fonctionnalités ici

La vidéo est un élément essentiel du marketing numérique. Vous ne pouvez pas ignorer les avantages incroyables de l'utilisation de la vidéo comme stratégie marketing.

Cela dit, la vitesse de chargement de votre vidéo contribue à offrir une meilleure expérience utilisateur sur votre site Web.

Pour offrir des expériences vidéo rapides et sans décalage sur votre site Web Webflow, vous avez besoin d'une solution telle que SmartVideo.

Avec des vidéos rapides, vous bénéficiez d'une meilleure rétention des utilisateurs, de plus de conversions, de taux de rebond plus faibles et de plus de ventes. C'est une évidence.

D'ailleurs, qui veut regarder une vidéo qui prend une éternité et un tour du soleil à charger ?

Absolument personne ! Pas même toi.

Cela dit, laissez-nous intégrer Swarmify à votre site Web Webflow pour accélérer vos vidéos et faire sourire vos clients estimés.

N/B : Pour intégrer Swarmify à Webflow, vous avez besoin d'un compte Swarmify actif et d'un forfait payant sur Webflow.

Toujours sur la clôture ? Ne sois pas . Inscrivez-vous à Swarmify dès aujourd'hui et profitez de notre réduction exclusive de 50 % . Curieux? En savoir plus ici.

Cela dit, intégrons l'hébergement vidéo de Swarmify à votre site Web Webflow.

Comment ajouter Swarmify à Webflow

'Avant d'arriver à Webflow, laissez-nous d'abord configurer votre extrait SmartVideo. Allez-y, connectez-vous à votre tableau de bord Swarmify et cliquez sur Configuration , comme indiqué ci-dessous.

Ensuite, choisissez si vous avez des vidéos YouTube sur votre Webflow :

Choisir Oui ci-dessus garantit que SmartVideo convertit automatiquement toutes les vidéos YouTube sur votre site Web Webflow. Appuyez sur le bouton Suivant .

Sur l'écran suivant, choisissez si votre site Webflow contient des vidéos d'arrière-plan :

Vous souhaitez modifier les couleurs de votre lecteur vidéo pour qu'elles correspondent à votre site Webflow ? Vous pouvez le faire dans l'écran suivant :

Appuyez sur Suivant .

Ensuite, vous pouvez modifier la forme du bouton de lecture si vous le souhaitez. Je préfère le bouton hexagonal par défaut, mais vous avez la possibilité de choisir entre rectangle ou cercle :

Choisissez ensuite un filigrane personnalisé pour vos vidéos :

Tu es doué pour ça, je dois l'admettre :)

Appuyez sur Suivant .

Sur l'écran suivant, choisissez si vous souhaitez vendre des publicités sur vos vidéos, puis cliquez sur Terminer :

Enfin, cliquez sur Copier dans le presse-papiers , comme indiqué ci-dessous.

Maintenant, votre extrait SmartVideo est prêt pour votre site Web Webflow.

Et ensuite ?

Nous allons maintenant ajouter le Swarmify à votre site Web Webflow.

Voici l'exemple de site Web avec lequel je travaille, comme promis :

J'ai emprunté la fameuse vidéo Jerusalema d'Openmic Productions. Super chanson et vidéo, soit dit en passant. Partout dans le monde, les gens relèvent le défi de la danse Jerusalema .

Comme j'aimerais pouvoir danser.

Passons à autre chose, ajoutons Swarmify à votre site Web Webflow.

Connectez-vous à Webflow :

Entrez les détails et appuyez sur le bouton Se connecter :

Ensuite, cliquez sur le site Web sur lequel vous souhaitez ajouter SmartVideo :

Vous êtes maintenant à l'intérieur du créateur de site Web intuitif dont nous avons parlé plus tôt :

Mais nous n'ajouterons pas l'extrait SmartVideo à une seule page. Nous voulons que l'extrait s'applique à l'ensemble du site Web.

Alors, qu'est-ce que je fais Freddy ?

Cliquez sur l'icône Webflow (W) (se transforme en menu hamburger lorsque vous passez la souris) :

Ensuite, cliquez sur Paramètres du projet :

Après cela, appuyez sur Code personnalisé :

Ouais.

Ensuite, collez l'extrait de code SmartVideo que vous avez copié précédemment dans la section Head Code et cliquez sur Save Changes comme ceci :

Avec cet extrait, votre flux Web est connecté à Swarmify. Toutes les vidéos YouTube de votre site seront converties automatiquement :)

Fait.

Le résultat?

Cette:

Remarquez le nouveau lecteur vidéo sans marque tierce.

N'oubliez pas : si vous utilisez YouTube, utilisez l'intégration au lieu du lien direct, c'est-à-dire https://www.youtube.com/embed/fCZVL_8D048 contre https://www.youtube.com/watch?v=fCZVL_8D048 .

Conseil de pro : veuillez utiliser le lien d'intégration. Assurez-vous d'utiliser le lien d'intégration lorsque vous ajoutez des vidéos à votre site Web Webflow.

Vous hébergez des vidéos ailleurs ?

SmartVideo vous soutient

Découvrez les 9 meilleurs sites de téléchargement de vidéos et services de stockage dans le cloud.

Voici un lien partageable : https://swarmify.com/blog/top-video-upload-sites-cloud-storage-services/.

Ajout de balises SmartVideo

Vous pouvez ajouter une vidéo SmartVideo n'importe où sur votre site Webflow à l'aide d'une balise SmartVideo :

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls></smartvideo>

Ouvrez la page Webflow que vous souhaitez modifier. Pour notre exemple, je remplacerai la section Hero par la même vidéo Jerusalema que nous avons utilisée précédemment. Cette fois cependant, j'utiliserai la balise SmartVideo ci-dessus à la place.

Voici à quoi ressemble ma balise SmartVideo prête :

 <smartvideo src="https://www.youtube.com/embed/fCZVL_8D048" width="1280" height="720" class="swarm-fluid" controls></smartvideo>

Remarquez que je remplace path/to/my/video.mp4 par le lien d'intégration de la vidéo.

Ensuite, cliquez sur Ajouter (+) et choisissez Intégrer , comme indiqué ci-dessous :

Ensuite, collez votre tag SmartVideo et cliquez sur Enregistrer & Fermer :

Maintenant, lorsque je consulte mon exemple de site Web dans l'interface, je vois la vidéo convertie :

Aussi simple que A, B, C.

Dis au revoir?

Les utilisateurs de Webflow trouveront SmartVideo très utile. SmartVideo accélère vos vidéos pour une meilleure expérience utilisateur.

Swarmify SmartVideo offre des vidéos 12 fois plus rapides que la moyenne du secteur. Vous augmenterez vos conversions et vos ventes avec des vidéos plus rapides.

Jusqu'à la prochaine fois, créez plus de vidéos et accélérez-les avec SmartVideo de Swarmify :)