Personnaliser le badge publicitaire

Comment ajuster la couleur d'arrière-plan du badge publicitaire ?

Pour ajuster l'arrière-plan du texte « Sponsored », procédez comme suit :

Étape n°1

Sélectionnez une option de couleur via RGBA.

Étape n°2

Avant le code d'intégration Firework, insérez l'extrait CSS suivant :

<style>
fw-embed-feed {
   --fw-ad-badge-background: rgba(175, 175, 175, 0.8); /* Arrière-plan personnalisé du badge « Sponsored » */  
}
</style>

Remplacez la valeur rgba() par votre propre couleur personnalisée.

Comment ajuster le style de police du badge publicitaire ?

Google Fonts sera utile ici !

Étape n°1

Sélectionnez simplement le style de police que vous souhaitez utiliser depuis Google Fonts.

Étape n°2

Copiez le code « @import » de Google Fonts à insérer avant le code d'intégration Firework. Exemple :

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab');
</style>

Comment ajuster la couleur de police du badge publicitaire ?

Étape n°1

Sélectionnez une option de couleur via RGBA.

Étape n°2

Avant le code d'intégration Firework, insérez le script suivant :

<style>
fw-embed-feed {
   --fw-ad-badge-font-color: rgba(255, 255, 255, 1) !important; /* Couleur de police personnalisée du badge « Sponsored » */
}
</style>

Remplacez la valeur rgba() par votre propre couleur personnalisée.

Étape n°3

Enfin, définissez l'arrière-plan sur « transparent » et saisissez votre style de police. Par exemple :

<style>
fw-embed-feed {
   --fw-ad-badge-font-color: rgba(255, 255, 255, 1) !important; /* Couleur de police personnalisée du badge « Sponsored » */
  --fw-storyblock-background: transparent;
  --fw-font-family: "Roboto Slab", serif;
}
</style>

Exemple complet

Voici un exemple de script HTML avec les ajustements ci-dessus.

<script async type="text/javascript" src="//asset.fwpub1.com/js/embed-feed.js"></script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab');
fw-embed-feed {
--fw-ad-badge-background: rgba(175, 175, 175, 0.8); /* Arrière-plan personnalisé du badge « Sponsored » */
--fw-ad-badge-font-color: rgba(255, 255, 255, 1) !important; /* Couleur de police personnalisée du badge « Sponsored » */
--fw-storyblock-background: transparent;
--fw-font-family: "Roboto Slab", serif;
}
</style>
<fw-embed-feed
channel="playlist"
 playlist="oyrAAg"
mode="row"
open_in="default"
max_videos="0"
placement="middle"
branding="false"
player_placement="bottom-right"
></fw-embed-feed>