Bonjour,
J'utilise tarteaucitron.js avec SPIP 3.2.1.
J'ai mis en place la coordination entre tarteaucitron.js et le plugin
Oembed pour un site :
Quand l'utilisateur déclenche la lecture d'une vidéo (dailymotion,
vimeo, youtube] - l'interface de gestion des cookies
(autorisation/interdiction) de tarteaucitron.js est coordonnée (se met
sur autoriser), le cookie tarteaucitron.j qui mémorise les choix de
l'utilisateur également.
Pour le modèles oembed_video.html :
diff --git a/squelettes/modeles/oembed_video.html
b/squelettes/modeles/oembed_video.html
index 717a920..8b95c94 100644
--- a/squelettes/modeles/oembed_video.html
+++ b/squelettes/modeles/oembed_video.html
@@ -1,10 +1,12 @@
#SET{thumbnail,#ENV{data/thumbnail_url}|sinon{#ENV{data/image}}}
#SET{async,#ENV{async}|=={non}|non|et{#GET{thumbnail}|et{#ENV*{data/ht
ml}|match{'<iframe'}}|oui}}
+#SET{service_regexp,dailymotion|vimeo|youtube}
+
<div class="oembed oe-video[(#GET{async}|oui)async] clearfix[
(#ENV{align})]" style="max-width: #ENV{data/width}px; max-height:
#ENV{data/height}px; overflow: hidden">
- <div class="rwd-video-container[(#GET{async}|oui)oe-play-
button]"
+ <div
[id="Spip[(#VAL|uniqid|hexdec)]edspipoembed(#ENV{data/html}|match{#GET{
service_regexp}, Uims})"] class="rwd-video-
container[(#GET{async}|oui)oe-play-button]"
style="width:100%;height:0;padding-
bottom:[(#ENV{data/height}|div{#ENV{data/width}}|mult{100}|round{2})]%;
[background-
image:url('(#GET{thumbnail}|oembed_safe_thumbnail)');background-
repeat:no-repeat;background-position:center;background-size:cover;]"
- [(#GET{async}|oui)onclick="if
(jQuery(this).is('.oe-play-button')){jQuery(this).removeClass('oe-play-
button').addClass('loading').html(decodeURIComponent('[(#ENV*{data/html
}|oembed_force_video_autoplay|rawurlencode|texte_script)]'));}"]>
- [(#GET{async}|oui)<button
onclick="jQuery(this).parent().trigger('click');"><:oembed:bouton_lectu
re:></button>]
+ [(#GET{async}|oui)onclick="if
(jQuery(this).is('.oe-play-button')){jQuery(this).removeClass('oe-play-
button').addClass('loading').html(decodeURIComponent('[(#ENV*{data/html
}|oembed_force_video_autoplay|rawurlencode|texte_script)]'));}
tarteaucitron.userInterface.respond(this, true);"]>
+ [(#GET{async}|oui)<button
onclick="jQuery(this).parent().trigger('click');"><span class="oe-play-
button_label"><:oembed:bouton_lecture:></span></button>]
[(#GET{async}|non)[(#ENV*{data/html}|et{#ENV{au
toplay}}|?{[(#ENV*{data/html}|oembed_force_video_autoplay)],#ENV*{data/
html}|sinon{#ENV{url}}})] ]
</div>
<style><!--/**/.oe-video .loading {background-
image:url("#CHEMIN_IMAGE{searching.gif}")!important;background-
size:auto !important;}/**/--></style>
Pour les styles (coordination du thème avec logique tarteaucitron.js -
bouton vert et non rouge):
-.oe-play-button button {text-indent:-5000em;position:
absolute;display: block;padding:0;left: 50%;top: 50%;border:
none;background:#000;width: 66px;height: 66px;margin-left:
-33px;margin-top: -33px;z-index:10;-moz-border-radius: 50%;-webkit-
border-radius: 50%;border-radius: 50%;-moz-box-sizing:border-box;-
webkit-box-sizing:border-box;box-sizing:border-box}
+.oe-play-button button {text-indent:-5000em; cursor: pointer;
position: absolute;display: block;padding:0;left: 50%;top: 50%;border:
none;background:#1b870b;width: 66px;height: 66px;margin-left:
-33px;margin-top: -33px;z-index:10;-moz-border-radius: 50%;-webkit-
border-radius: 50%;border-radius: 50%;-moz-box-sizing:border-box;-
webkit-box-sizing:border-box;box-sizing:border-box}
```
-.oe-play-button:hover button,.oe-play-button button:focus {background-
color: #DD2826;}
+.oe-play-button:hover button,.oe-play-button button:focus {background-
color: #1b870b;}
Pour le script tarteaucitron.js (https://github.com/AmauriC/tarteaucitr
on.js/blob/ec634a20374a914ce5a077685503f4febf1e527a/tarteaucitron.js#L5
47) :
- var key = el.id.replace(new RegExp("(Eng[0-
9]+|Allow|Deni)ed", "g"), '');
+ var key = el.id.replace(new RegExp("(Spip[0-9]+Eng[0-
9]+|Allow|Deni)ed", "g"), '');
Cordialement,
Eric