Vous souhaitez ajouter une vidéo provenant de Streamfizz à votre site web (faire une intégration) mais vous ne savez pas par où commencer ? Voici un guide rapide pour vous aider dans la démarche.

Mettre la vidéo sur votre site internet est le meilleur moyen de faire passer votre message. Le fait de placer une vidéo sur votre site web s’appelle une intégration, et dans ce guide, nous vous montrerons comment bien faire les choses en utilisant un code d'intégration aussi appelé iframe, ou code embed.

Préparation

Une fois que vous avez ajouté et personnalisé votre vidéo, vous êtes prêt à l’intégrer. Super !

Fait important : même après avoir intégré une vidéo sur votre site internet, vous pouvez y apporter des modifications dans la gestion de celle-ci. Ces modifications s’appliqueront automatiquement partout où votre vidéo est intégrée dès le rechargement de votre page.

Options et personnalisation du code d'intégration du player

Ces options vont vous permettre de donner à votre player une apparence en adéquation avec votre marque mais aussi des options qui permettront d'enrichir l'expérience de vos spectateurs.
Pour ceci, nous conseillons de consulter l'article dédié la personnalisation du player.

Générer un code d’intégration

Un code d’intégration est un extrait de code que vous pouvez utiliser pour ajouter du contenu (comme une vidéo!) à une page web.

Pour générer un code d’intégration pour votre vidéo, commencez par cliquer sur votre vidéo, puis sur l’onglet “Propriétés” de votre page vidéo. Vous trouverez dans cet écran la section avec le code d’intégration de la vidéo que vous souhaitez. Cliquez sur le bouton “Copier” et collez directement sur votre site pour l’essayer.

Intégration <Inline>

Par défaut, le code d’intégration se placera directement sur votre page, en ligne avec votre contenu. Voici un exemple d’intégration “standard” en ligne :

Voici à quoi ressemble un code d’intégration en ligne standard :

<iframe
     width="640" height="360"
     src="https://player.streamfizz.live/embed/media/cjzxys06odnu607171zvg20sm"
     frameborder="0" allow="accelerometer;
     autoplay; encrypted-media; picture-in-picture" allowFullScreen>
</iframe>

N’hésitez pas à saisir ce code d’intégration pour l’essayer ou accéder à votre compte Streamfizz pour obtenir un code d’intégration pour votre propre vidéo !

Intégration d’un lien direct

Parfois, il arrive que l’on utilise un thème sur son site ou un bloc qui va contraindre l’intégration d’une vidéo sur son site. Pourtant, on aimerait pouvoir garder tout le travail de CSS (design) qui à été réalisé par le graphiste. Dans ces cas-là, vous pouvez intégrer directement le lien de la vidéo derrière votre image ou animation.

Voici à quoi ressemble un lien insérable sur un site :

//app.streamfizz.live/embed/cjzxys06odnu607171zvg20sm

N’hésitez pas à saisir ce code d’intégration pour l’essayer ou à accéder à votre compte Streamfizz pour obtenir un lien pour votre propre vidéo !

Adapter votre player Streamfizz en fonction de vos besoins

Une vidéo qui s’adapte à son environnement d’intégration, à savoir _responsive_, est une vidéo heureuse.

Pour les vidéos incorporées via le lien d’intégration sont réactives par défaut, ce qui signifie que votre vidéo se redimensionnera automatiquement à la largeur de son conteneur. Super !

Protéger vos <embed>

Vous voulez vous assurer que vos vidéos ne puissent pas être lues n’importe où (et bien, dans votre compte Streamfizz) ? Vous pouvez suivre les consignes de restrictions et de sécurité disponible dans la documentation.

Vous allez également pouvoir paramétrer des restrictions d'intégrations afin de sécuriser l'accès à votre player et donc votre média.
Ces restrictions pourront se faire selon 3 modalités :
Publique : Votre contenu sera intégrable par tous sans aucune restriction
Bloquée : Votre contenu ne sera pas intégrable par les autres utilisateurs de Streamfizz
Personnalisé : Votre contenu sera intégrable par les domaines que vous autoriserez dans le champ prévu à cet effet

Statistiques sur vos vidéos

Maintenant que votre vidéo est intégrée à votre page web, vous pouvez utiliser les analyses de Streamfizz pour voir comment vos spectateurs interagissent avec votre contenu.

Dépannages des problèmes d’intégration

L’intégration peut être difficile ! Si vous êtes bloqué, n’hésitez pas à nous contacter. Pour cela, nous ne sommes jamais bien loin, en vous connectant à votre compte Streamfizz, ou en nous contactant directement via la bulle de conversation et discuter en direct avec une personne de notre équipe disponible dans ce tchat. Nous serons plus qu’heureux de vous aider !

Mis à jour le : 15/09/2023