1
Configuration API YouTube
Obtenir une clé API YouTube
Allez sur Google Cloud Console Créez un nouveau projet Activez l'API YouTube Data v3 Créez des identifiants → Clé API Copiez votre clé API
Créer un compte Cloudflare
Allez sur Cloudflare Créez un compte gratuit Allez dans Workers & Pages Cliquez sur Créer une application
2
Déployer le Worker
Créez un worker et mettez ce code à l'intérieur :
// Worker API YouTube pour bb-contents
// Déployez ce code sur Cloudflare Workers
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
// Gérer les CORS
if (request.method === 'OPTIONS') {
return new Response(null, {
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type',
}
})
}
try {
const url = new URL(request.url)
const channelId = url.searchParams.get('channelId')
const maxResults = url.searchParams.get('maxResults') || '10'
const allowShorts = url.searchParams.get('allowShorts') || 'false'
if (!channelId) {
return new Response(JSON.stringify({ error: 'Le paramètre channelId est requis' }), {
status: 400,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
}
})
}
// Remplacez YOUR_YOUTUBE_API_KEY par votre vraie clé API YouTube
const apiKey = 'YOUR_YOUTUBE_API_KEY'
// Déterminer la durée des vidéos selon allowShorts
if (allowShorts === 'true') {
// Récupérer uniquement les vidéos courtes (< 4 minutes)
const apiUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${channelId}&maxResults=${maxResults}&order=date&type=video&videoDuration=short&key=${apiKey}`
const response = await fetch(apiUrl)
if (!response.ok) {
throw new Error(`Erreur API YouTube: ${response.status}`)
}
const data = await response.json()
return new Response(JSON.stringify(data), {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Cache-Control': 'public, max-age=3600'
}
})
} else {
// Récupérer les vidéos moyennes ET longues (exclure les shorts)
const [mediumResponse, longResponse] = await Promise.all([
fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${channelId}&maxResults=${maxResults}&order=date&type=video&videoDuration=medium&key=${apiKey}`),
fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${channelId}&maxResults=${maxResults}&order=date&type=video&videoDuration=long&key=${apiKey}`)
])
if (!mediumResponse.ok || !longResponse.ok) {
throw new Error(`Erreur API YouTube: ${mediumResponse.status || longResponse.status}`)
}
const [mediumData, longData] = await Promise.all([
mediumResponse.json(),
longResponse.json()
])
// Combiner les résultats et trier par date
const combinedItems = [...(mediumData.items || []), ...(longData.items || [])]
combinedItems.sort((a, b) => new Date(b.snippet.publishedAt) - new Date(a.snippet.publishedAt))
// Limiter au nombre de résultats demandé
const limitedItems = combinedItems.slice(0, parseInt(maxResults))
return new Response(JSON.stringify({
...mediumData,
items: limitedItems
}), {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Cache-Control': 'public, max-age=3600'
}
})
}
} catch (error) {
return new Response(JSON.stringify({
error: 'Erreur interne du serveur',
message: error.message
}), {
status: 500,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
}
})
}
} NOTE
N'oubliez pas de mettre votre CLÉ API dans le code du worker. Ensuite, copiez l'URL de votre worker.
3
Configuration Webflow
Ajoutez ceci dans le Head Code de votre page Webflow :
<!-- BeBranded Contents -->
<script async src="https://cdn.jsdelivr.net/npm/@bebranded/bb-contents@latest/bb-contents.js"></script>
<!-- Intégration YouTube par bb-contents -->
<script>
window._bbContentsConfig = {
youtubeEndpoint: 'VOTRE URL CLOUDFLARE WORKER ICI'
};
</script> NOTE
Créez un div dans Webflow
Ajoutez l'attribut : bb-youtube-channel="UC_VOTRE_ID_CHAINE"
Ajoutez un template avec bb-youtube-item
Utilisez la page template pour avoir la structure dans Webflow
Facile à déployer, copiez-collez pour l'utiliser librement dans vos projets !
4
Personnalisation du module
ID de la chaîne
bb-youtube-channel
=
"ID de la chaîne"
Ajouter cet attribut :
Nom
bb-youtube-channel
Valeur
ID de la chaîne
Nombre de vidéos dans la grille
bb-youtube-video-count
=
"9"
Ajouter cet attribut :
Nom
bb-youtube-video-count
Valeur
9
NOTE
Vous pouvez mettre le nombre que vous voulez.
Autoriser les YouTube Shorts ?
bb-youtube-allow-shorts
=
"true"
Ajouter cet attribut :
Nom
bb-youtube-allow-shorts
Valeur
true
NOTE
Les valeurs sont true ou false.
Langue du module
bb-youtube-language
=
"fr"
Ajouter cet attribut :
Nom
bb-youtube-language
Valeur
fr
NOTE
Le module supporte actuellement seulement 2 langues :
- Français (fr) - Langue par défaut
- Anglais (en) - Langue alternative
Toujours besoin d'aide ?
