Comme vous le savez sans doute déjà, le 25 mai 2018 entre en vigueur le Règlement Général de Protection de Données (RGPD). Il y a quelques semaines, nous vous faisions un petit état des lieux à propos du RGPD appliqué aux sites Internet. Certains d’entre vous ont fait mettre leur site en conformité. Les vidéos comme Vimeo, Youtube ou Dailymotion sont des services tiers qui installent des cookies. Si Tarteaucitron est utilisé pour gérer l’installation des cookies (cliquez ici pour en savoir plus sur Tarteaucitron), la méthode d’intégration de ces vidéos n’est plus la même !
Vous prendrez bien une part de tarte au citron avec nous ?
Intégrer des vidéos quand on utilise Tarteaucitron
De la même manière qu’il peut refuser les cookies de Google Analytics, l’utilisateur peut choisir s’il accepte, mettons, les cookies de Youtube. S’il n’accepte pas, le programme va simplement désactiver les vidéos sur votre site. Sur le nôtre, quand l’internaute a refusé, voici ce que ça donne à la place de la vidéo :
Il gardera néanmoins toujours la possibilité de réactiver le service, d’un simple clic sur le bouton “Autoriser” ou via le panneau de gestion Tarteaucitron.
Cependant, pour permettre ce filtrage, les liens d’intégration fournis par les sites d’hébergement de vidéos ne doivent plus être utilisés ! Voici la marche à suivre désormais :
Intégrer une vidéo Youtube lorsque Tarteaucitron est installé
Tout d’abord (impératif !), votre prestataire web doit, après initialisation du programme, activer le service Youtube dans le code de votre site.
Votre nouveau code d’intégration de vidéos Youtube prendra la forme suivante :
<div class="youtube_player" videoID="Identifiant_de_ma_vidéo"></div>
Mais où donc trouver ce fameux identifiant (ou ID) de ma vidéo ?
Observons l’anatomie de l’adresse web d’une vidéo sur Youtube. Pour l’exemple, nous allons reprendre cette vidéo sur la typographie que nous avions déjà publiée ici.
L’adresse Youtube de la vidéo, visible dans la barre d’adresse, est celle-ci :
La partie qui va nous intéresser est celle encadrée en rouge (après v=):
Et comme vous pouvez le constater ci-dessous, le même morceau de code existe dans le lien d’intégration Youtube que vous utilisez habituellement !
Il se trouve en effet que ce bout de code un peu barbare n’est autre que l’ID de la vidéo ! On le garde au chaud pour l’insérer à notre tout nouveau code d’intégration :
<div class="youtube_player" videoID="u8m6x1KJPcs"></div>
Vous pouvez également activer certaines options : la lecture automatique (autoplay), les boutons de contrôle pour l’internaute (controls) ou la visibilité du titre (showinfo), en leur attribuant “1” pour activer la fonction, ou “0” pour ne pas l’activer. Ainsi, pour une vidéo avec lecture automatique et sans contrôles, on écrira :
<div class="youtube_player" videoID="u8m6x1KJPcs" autoplay="1" controls="0"></div>
Si et seulement si vous avez la main sur certains éléments de design du site (et notamment la taille des vidéos), vous pouvez bien sûr ajouter les valeurs de “width” (largeur) et “height” (hauteur). Mais ce n’est pas forcément recommandé pour une bonne adaptation sur mobile !
<div class="youtube_player" videoID="u8m6x1KJPcs" width="560" height="315" autoplay="1" controls="0"></div>
Intégrer une vidéo Vimeo lorsque Tarteaucitron est installé
Après activation du service Vimeo dans votre site, votre code d’intégration prendra la forme suivante :
<div class="vimeo_player" videoID="Identifiant_de_ma_vidéo"></div>
Et de la même manière que Youtube, on retrouve le fameux identifiant dans l’adresse Vimeo de la vidéo (et dans le lien d’intégration également !)
De même que pour Youtube, vous pouvez ajouter les valeurs de “width” (largeur) et “height” (hauteur).
<div class="vimeo_player" videoID="Identifiant_de_ma_vidéo" width="560" height="315"></div>
Intégrer une vidéo Dailymotion lorsque Tarteaucitron est installé
Après activation du service Dailymotion, votre code d’intégration prendra cette forme :
<div class="dailymotion_player" videoID="Identifiant_de_ma_vidéo"></div>
Comme pour les deux précédents, copiez-collez l’identifiant de la vidéo visible dans la barre d’adresse de votre navigateur :
Les options de lecture automatique (autoplay) et visibilité du titre (showinfo) sont disponibles, ainsi que les attributs de taille (width et height). Exemple de code pour une vidéo en lecture automatique :
<div class="dailymotion_player" videoID="x6bbtO5" autoplay="1" ></div>
Restez connectés ! Nous reviendrons prochainement sur d’autres adaptations techniques liées au RGPD !
Pour en savoir plus sur la règlementation : www.cnil.fr
Pour en savoir plus sur l’installation du gestionnaire de cookies Tarteaucitron et l’intégration des services à votre site : https://opt-out.ferank.eu/fr/install/
