Comment utiliser ce clonable ?

1. Créer une collection Webflow pour vos vidéos.

La collection devra contenir obligatoirement les champs suivants :

URL video

(Link)

URL poster

(Link)

Image cover

(Image)

Le lien "URL video" sera à placer dans l'embed "plyer_embed" et devra contenir le lien de votre vidéo.
Le lien "URL poster" sera à placer dans l'embed "plyer_embed" et devra contenir le lien de l'image poster de votre vidéo.
L'image "Image cover" sera à uploader directement dans la collection, et servira comme image de cover lorsque la vidéo n'est pas jouée.

2. Ajouter un élement "Collection list" à votre projet Webflow

Vous pouvez ensuite le modifier. Si vous souhaitez utiliser vos propres noms de classes pour la collection, n'oubliez pas de changer le code en fonction (voir : étape 3). Sinon, utilisez les même noms de classe que ceux du clonable (voir : étape 4). Vous pouvez ensuite lier la collection à vos textes et image.

Ajoutez un embed HTML à votre item de collection. Configurez le afin qu'il prenne 100% de weight et 100% de height de l'espace disponible. Utilisez la position relative pour le placer correctement. N'oubliez pas de lier l'embed Plyer à l'URL de la vidéo Webflow et à l'URL de l'image comme présenté ci-dessous.

Vous pouvez enfin designer le bouton play de votre Plyer, et le bouton pause, à votre guise.

Copier le code

HTML

3. Ajouter le custom code dans le header et dans le body

Inside <head> tag

Copier le code

HTML

Before </body> tag

Copier le code

HTML

$(document).ready(function () {
function hideCover(playerElement) {
$(playerElement).closest(".video-grid_card-video").find(".plyr_cover").hide();
} function showCover(playerElement) {
$(playerElement).closest(".video-grid_card-video").find(".plyr_cover").show();
} function togglePlay(player, players) {
if (player) {
if (!player.playing) {
players.forEach((p) => {
if (p.playing) {
p.pause();
}
});
player.play();
} else {
player.pause();
}
}
} const players = [];
document.querySelectorAll(".plyr_video").forEach((p) => {
const player = new Plyr(p, {
controls: false,
fullscreen: { enabled: false }, // désactiver la possibilité de passer en plein écran
}); player.on("play", () => hideCover(p));
player.on("pause", () => showCover(p));
players.push(player);
}); $(".plyr_cover").click(function () {
const $item = $(this).closest(".video-grid_collection-list-item");
const videoElement = $item.find(".plyr_video").get(0);
const player = players.find((p) => p.media === videoElement);
togglePlay(player, players);
});
});

Attention : Le code affiché en blanc équivaut aux noms de classes à modifier dans le cas où vous décidez de renommer vos classes.

4. Vérifier le nommage de vos classes

Les classes que vous utiliserez pour le nommage devront porter le même nom que celles que vous avez indiqué dans le custom code. Si vous ne souhaitez pas changer le nom des classes dans le code, vous pouvez utiliser cette structure et ce nommage :

A propos des classes

La div "video-grid_card-video" contient tout le block vidéo (contenu vidéo et contenu texte).
La div "video-grid_collection-list-wrapper" est le conteneur de la collection
La div "video-grid_collection-list-item" est l'item de collection pour vos vidéos. C'est une classe importante qui doit être absolument modifiée dans le code JS si elle est renommée sur Webflow.
"plyr_wrapper" contient la vidéo, la cover et le code embed.
"plyr_embed" est le code embed de la vidéo.
"plyr_cover" contient la cover de la vidéo, ainsi que les boutons play et pause.

Attention :

Veillez à bien à modifier le code en fonction du nommage de classe que vous choisissez. Par exemple, le code actuel ne fonctionnera pas si vous renommez l'item de collection "video-grid_collection-list-item" sans modifier le code au préalable. Afin de vous aider à les identifier, les noms de classe à modifier dans le code javascript sont affichés en blanc sur ce site.