Image
Top
Navigation
3 mai 2018

RGPD 2018 / Tarteaucitron : Intégrez vos vidéos sur votre site web

Intégrer simplement ses vidéos quand Tarteaucitron est installé sur son site Internet

RGPD 2018 / Tarteaucitron : Intégrez vos vidéos sur votre site web

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

Cookies

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 :

Refus cookies youtube

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é

Youtube

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 :

Adresse vidéo Youtube

La partie qui va nous intéresser est celle encadrée en rouge (après v=):

Anatomie adresse Youtube

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 !

Lien d'intégration Youtube

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>

Options Youtube
Intégration Youtube avant / après

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 !)

Vimeo lien video

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 :

Adresse dailymotion

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/