Intégrer des vidéos Bunny Stream ne fonctionne pas

Salut

J’essaie d’intégrer des vidéos bunny.net Stream sur mon forum, mais ça ne fonctionne pas.

Le lien direct affiche seulement un aperçu d’image :

et le code d’intégration avec iframe n’affiche rien :

:arrow_down:

:arrow_up:

code :

<div style="position: relative; padding-top: 56.25%;"><iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>

Avez-vous ajouté https://iframe.mediadelivery.net/embed/ aux paramètres du site iframes autorisés avant de publier ?

Je pense que ce n’est tout simplement pas encore pris en charge par Discourse en tant que Onebox.

Cependant, l’iframe fonctionne (bien que petite) ; :

N’oubliez pas d’ajouter https://iframe.mediadelivery.net/embed/ dans votre paramètre allowed iframes :slight_smile:


Zut, littéralement 1 seconde de retard :smile:

Merci Falco et Coin-coin !

Je vais marquer ce post comme résolu, mais j’ai une dernière question.

Bunny suggère ce code pour le "non responsive" :

<iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" width="1280" height="720" style="border: none;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe>

Mais la taille n’est pas la bonne :

Et ce code pour le "responsive" :

<div style="position: relative; padding-top: 56.25%;"><iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>

Et la taille est trop petite

Des suggestions ?

Je ne suis pas certain qu’un iframe puisse redimensionner correctement la vidéo ici.

Les attributs de style sont supprimés de la balise <iframe>, donc définir des tailles ici n’aura aucun effet, sauf si vous ajoutez le CSS dans votre propre thème. Mais cela ne fera pas de miracle.

Si vous définissez la largeur de l’iframe à 100 % du conteneur de publication, cela s’affichera ainsi :

Et vous ne pouvez pas définir une hauteur automatique qui dépendrait du ratio de la vidéo.

Je pense qu’il n’y a pas de solution simple autre que d’utiliser la petite vidéo (ne mettez pas la partie <div style="position: relative; padding-top: 56.25%;"> car elle sera supprimée lors de la publication de toute façon), et les personnes qui souhaitent voir la vidéo en plus grand format cliqueront sur l’icône plein écran en bas à droite de la vidéo.

Vous pouvez également poster sur Contribute > Feature pour demander si un support onebox pour les vidéos Bunny Stream pourrait être développé, mais sauf s’il y a une forte demande (ce dont je doute), cela appartiendra probablement à la balise pr-welcome, ce qui signifie que l’équipe n’ajoutera pas la fonctionnalité elle-même, mais que toute personne ayant des connaissances en codage est la bienvenue pour développer cette fonctionnalité afin qu’elle puisse être ajoutée à Discourse éventuellement.

Merci Coin-coin

Enfin je vais utiliser ce réglage sur le code iframe de Bunny :

  • ne pas sélectionner pour le code responsive
    image

  • Sur le code par défaut suivant, remplacer la taille par width=“99%” height=“300”

<iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" width="1280" height="720" style="border: none;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe>

La hauteur sera un peu petite sur ordinateur, et un peu grande sur smartphone, mais la largeur sera correcte.

Onebox serait génial, mais d’après ce que je vois, nous n’avons que YouTube, Vimeo et TikTok pour l’instant sur Discourse.