Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: GDPR in practice – Content from third-parties without cookies?
I think that the cookie appears only when the json file is requested by a page, which is how the code above should be used.
the link I have also lists this forum as a referrer… I guess that the safest way for GDPR is if all images are downloaded and used directly from the txp db.
Another interesting find is the thumbnail_url_with_play_button but I know that I will not be using it just yet.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: GDPR in practice – Content from third-parties without cookies?
I’ve tried out your php-based method and … it works! The inspector shows no cookies until the preview image is clicked. Privacy Badger shows nothing. Only when the iframe is embedded using the method described above is a cookie set for player.vimeo.com. I’ll clean it up a bit and post some code shortly.
TXP Builders – finely-crafted code, design and txp
Offline
Re: GDPR in practice – Content from third-parties without cookies?
Not sure that it helps you, just for fun:
<txp:etc_query url="https://vimeo.com/api/oembed.json?url=https://vimeo.com/247327862" query="thumbnail_url" />Offline
Re: GDPR in practice – Content from third-parties without cookies?
I tried both the php above and Oleg’s query neither of which return any results for me. Julian, I would love to see how you did it.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: GDPR in practice – Content from third-parties without cookies?
colak wrote #313397:
I tried both the php above and Oleg’s query neither of which return any results for me.
It works for me, on Pete’s demo site too. Could it be that file_get_contents() function is unavailable on your server?
Offline
Re: GDPR in practice – Content from third-parties without cookies?
etc wrote #313389:
Not sure that it helps you, just for fun:
<txp:etc_query url="https://vimeo.com/api/oembed.json?url=https://vimeo.com/247327862" query="thumbnail_url" />...
Brilliant! Thanks!
colak wrote #313397:
Julian, I would love to see how you did it.
Here’s my code based on what you posted (not using etc_query currently). I’m using Nicolas’ oui_player / oui_provider / oui_video combo to embed the videos in the site I’m working on. For that you specify a field or custom_field in the prefs that holds the address of the video in the form https://vimeo.com/{video_id} or https://player.vimeo.com/video/{video_id}. The following shortcode therefore uses the prefs from oui_vimeo to construct the placeholder too. Use it as follows in your page templates, forms or articles:
<!-- simplest version, uses the settings in the oui_vimeo prefs -->
<txp::vimeo_video />
<!-- with 'class' attribute, e.g. "widescreen" for responsive video containers -->
<txp::vimeo_video class="video-container widescreen" />
<!-- with additional 'play' attribute to embed a particular vimeo video -->
<txp::vimeo_video class="video-container widescreen" play="https://vimeo.com/123456789" />
<!-- precede with notextile when using in the body of an article -->
notextile. <txp::vimeo_video class="video-container widescreen" play="https://vimeo.com/123456789" />Additionally I’m using oui_cookie to check if the cookie cookie-consent is set to yes or not. If not, I create a figure element with the preview image, the title and a privacy notice.
And this is the txp form called vimeo_video of type misc. I slightly modified your quoted function so that you can have a user-definable thumbnail width (default is 1280px) but you can pass the width into the function that retrieves the thumbnail. You could use that to grab different sizes for a srcset:
<txp:oui_if_cookie name="cookie-consent" value="yes">
<txp:oui_vimeo class='o-flex-video<txp:yield name="class" wraptag=" <+>" />' play='<txp:yield name="video" />' />
<txp:else />
<txp:php>
global $prefs, $thisarticle, $variable;
$vimeo_video = parse('<txp:yield name="video" />');
if (empty($vimeo_video)) {
// if no custom vimeo src or ID given
// get the value from the custom_field defined in the oui_vimeo prefs
$play_src = get_pref('oui_player_custom_field');
$player_url = $thisarticle[$play_src];
} else {
// use specified custom vimeo src or vimeo ID
$player_url = $vimeo_video;
}
// Get just the vimeo video_id and place in a variable
// regex from oui_vimeo (thanks Nicolas)
preg_match('#^(http|https)://((player\.vimeo\.com/video)|(vimeo\.com))/(\d+)$#i', $player_url, $matches );
$variable['video_id'] = $matches[5];
if (!function_exists('vimeo_thumbnail')) {
function vimeo_thumbnail($vimeo_url, $thumbnail_size = null) {
if( !$vimeo_url ) return false;
if (null === $thumbnail_size) {
$thumbnail_size = "1280"; // default width of thumbnail in pixels
}
$data = json_decode( file_get_contents( 'http://vimeo.com/api/oembed.json?url=' . rawurlencode($vimeo_url) ) );
if( !$data ) return false;
$thumbnail_img_url = $data->thumbnail_url;
preg_match('#^(http|https)://(i\.vimeocdn\.com/video)/(\d+)_(.+)$#i', $thumbnail_img_url, $matches );
$thumbnail_id = $matches[3];
$thumbnail_url = 'http://i.vimeocdn.com/video/' . $thumbnail_id . '_' . $thumbnail_size . '.jpg';
return $thumbnail_url;
}
}
// Populate variable “video_img” with thumbnail URL
$variable['video_img'] = vimeo_thumbnail($player_url);
</txp:php>
<figure id="vimeo-<txp:variable name="video_id" />" class="o-flex-video<txp:yield name="class" wraptag=" <+>" /> unloaded">
<img alt="Film: <txp:title no_widow="0" />" class="o-flex-video__img" src="<txp:variable name="video_img" />" />
<figcaption>
<a class="o-flex-video__title" href="https://vimeo.com/<txp:variable name="video_id" />" target="_blank" title="View on vimeo"><span class="icon-vimeo"></span> <txp:title no_widow="0" /></a>
<div class="o-flex-video__notice"><span class="icon-info"></span> Clicking play overrides your privacy settings and connects to vimeo.com</div>
</figcaption>
</figure>
</txp:oui_if_cookie>
<txp:php>
// reset 'video_id' and 'video_img' variables so they don't accidentally affect subsequent vimeo video instances on the same page
global $variable;
unset($variable['video_id']);
unset($variable['video_img']);
</txp:php>In my homepage javascript, I then have a section as follows:
$(document).ready(function() {
// Click to play for "unloaded" vimeo videos when cookie-consent is declined
//Replace vimeo thumbnail with vimeo video iframe on click
$('body').on('click', '.o-flex-video.unloaded', function() {
// retrieve vimeo_id from id attribute of container
var vimeo_id = this.id.split('-')[1];
// instantiate iframe
var $iframe = $('<iframe />', {
src : '//player.vimeo.com/video/'+vimeo_id+'/?autoplay=1&portrait=0&byline=0&dnt=1',
frameborder : 0,
allowfullscreen : true
});
// replace preview placeholder with actual video
$(this).empty().append($iframe);
//switch state
$(this).removeClass('unloaded').addClass('loaded');
});
});And this is the CSS for the o-flex-video object:
.o-flex-video {
position: relative;
height: 0;
margin-bottom: 1rem;
overflow: hidden;
padding-bottom: 67.5%;
padding-top: 0
}
.o-flex-video.widescreen {
padding-bottom: 56.34%;
}
.o-flex-video.unloaded,
.o-flex-video.loaded {
background-color: #dcdcdc;
}
.o-flex-video iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: none;
}
.o-flex-video.unloaded .o-flex-video__img {
width: 100%;
height: auto;
padding: 0
}
.o-flex-video.unloaded .o-flex-video__title {
position: absolute;
top: 10px;
left: 10px;
color: #4caaf3;
text-decoration: none;
background-color: rgba(23, 35, 34, 0.75);
font-size: 18px;
line-height: 1;
font-weight: 700;
padding: 7px 12px 7px 9px;
}
.o-flex-video.unloaded .o-flex-video__notice {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
font-size: 14px;
line-height: 1.25;
color: #fff;
background-color: rgba(23, 35, 34, 0.75);
padding: 6px 10px;
}
/* play button */
.o-flex-video.unloaded figcaption::after {
content: '\f144'; /* play icon code */
font-size: 54px;
color: #4caaf3; /* play button colour */
position: absolute;
top: calc(50% - 23px); /* half video height - half icon size */
left: calc(50% - 23px); /* half video width - half icon size */
width: 46px;
height: 46px;
line-height: 46px;
font-family: 'icon-font';
background-color: #fff; /* white button background */
border-radius: 50%;
}
.o-flex-video.unloaded:hover {
cursor: pointer;
}
.o-flex-video.unloaded:hover figcaption::after {
color: #1f95f0; /* play button hover color */
}All of that results in something like this:
No cookies are served until the video is clicked. The video iframe then loads and on browsers that support autoplay then automatically starts. Browsers such as recent Chrome versions have stopped honouring autoplay, so you need to click again to start the video.
TXP Builders – finely-crafted code, design and txp
Offline
Re: GDPR in practice – Content from third-parties without cookies?
colak wrote #313397:
I tried both the php above and Oleg’s query neither of which return any results for me. Julian, I would love to see how you did it.
etc wrote #313400:
It works for me, on Pete’s demo site too. Could it be that
file_get_contents()function is unavailable on your server?
Yiannis, you could check first if allow_url_fopen is disabled / disallowed for your server. Maybe it says that in diagnostics, or maybe you need to check with phpinfo.
Oleg, if allow_url_fopen is disabled, might an approach with curl and the xml / json work? Something like what’s described here.
If that still doesn’t work for you, Yiannis, you could still use the code above with pre-downloaded thumbnails that you’ve saved on your server.
TXP Builders – finely-crafted code, design and txp
Offline
Re: GDPR in practice – Content from third-parties without cookies?
Hi Julian, Sorry for the silence… I’ve been concentrating on my architecture projects. Every year before the summer holidays everybody wants a piece of me (architecturally speaking). I’ll get back here with my tests once I finish all the drafting I need to do. I guess you’ve been there:)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Offline