Textpattern CMS support forum

You are not logged in. Register | Login | Help

#11 2018-08-09 13:20:55

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 6,801
Website

Re: GDPR in practice – Content from third-parties without cookies?

Thanks so much for the offer Julian. NeMe has a lot of videos too. In many pages. Your post prompted me to investigate better options for us. The little php snippet I linked to above and posted below might be exactly what we are looking for. Especially if I make it work. The idea is that I will still use the same form but alter it slightly so as to include the thumbs.

<txp:php>
function grab_vimeo_thumbnail($vimeo_url){
    if( !$vimeo_url ) return false;
    $data = json_decode( file_get_contents( 'http://vimeo.com/api/oembed.json?url=https://vimeo.com/<txp:yield name="video" />' . $vimeo_url ) );
    if( !$data ) return false;
    return $data->thumbnail_url;
}
</txp:php>

Hmmm looking at the headers of the json file I see a cookie:

ab_psb=1%7C0; ki_u=4ea11e15-430f-7fd8-22fe-d02d92afee69; ki_t=1381076321701%3B1514221502911%3B1514221502911%3B10%3B21; site_settings=%7B%22browse_format%22%3A%22detail%22%2C%22browse_format_vid%22%3A%22video%22%2C%22sticky_page%22%3A%22%5C%2Fmyvideos%22%7D; has_logged_in=1; stats_start_date=2017%2F10%2F28; stats_end_date=2017%2F11%2F01; pl_volume=58.57142857142858; sticky_brozar=1; clips=271224275%2C262332294%2C260535507%2C254113716%2C254097755%2C254080240%2C254010959%2C250252107%2C250230817; optimizelySegments=%7B%22198520930%22%3A%22direct%22%2C%22199004622%22%3A%22ff%22%2C%22199138489%22%3A%22false%22%2C%22213082152%22%3A%22none%22%2C%22222271074%22%3A%22true%22%2C%22264591493%22%3A%22true%22%2C%221581850087%22%3A%221%22%2C%225461120803%22%3A%22true%22%2C%225486770079%22%3A%22true%22%7D; optimizelyEndUserId=oeu1418652262057r0.6915765038589964; optimizelyBuckets=%7B%7D; ki_r=https%3A%2F%2Fwww.google.com%2F; _abexps=%7B%2223%22%3A%22%22%2C%2261%22%3A%22%22%2C%22106%22%3A%22%22%2C%22158%22%3A%22B%22%2C%22200%22%3A%22on%22%2C%22257%22%3A%22modal%22%2C%22287%22%3A%22on%22%2C%22308%22%3A%22on%22%2C%22329%22%3A%22off%22%2C%22330%22%3A%22off%22%2C%22333%22%3A%22on%22%2C%22337%22%3A%22on%22%2C%22342%22%3A%22a%22%2C%22348%22%3A%22b%22%2C%22402%22%3A%22on%22%2C%22509%22%3A%22yes%22%7D; vimeo_cart=%7B%22music%22%3A%7B%22store%22%3A%22music%22%2C%22version%22%3A1%2C%22quantities%22%3A%5B%5D%2C%22items%22%3A%5B%5D%2C%22currency%22%3Anull%2C%22attributes%22%3A%5B%5D%7D%7D; _abexps=%7B%22257%22%3A%22modal%22%2C%22287%22%3A%22on%22%2C%22402%22%3A%22on%22%2C%22509%22%3A%22yes%22%2C%22430%22%3A%22yes%22%7D; __ssid=b2c19065-d9ec-4a7f-a20b-3c77a9e7cb9a; _ga=GA1.2.977506590.1452781552; is_logged_in=1; _cb=eAC-mCcPIypusbcY; _chartbeat2=.1482051642145.1522917654928.1000001000000001.DTWwZe3jEuMDPs95jCv7RInlakFJ; vuid=2018511707.2072968561; has_uploaded=1; _mibhv=anon-1495437626615-3082000041_6631; sst_aid=4f2f06da-8dbb-1b80-1f51-251d13b780ef; sst_uid=321806; continuous_play_v3=0; __qca=P0-1843732458-1510334795681; _ym_uid=1511602370252529803; vimeo=OHSDLt4XMVHLeSSZtXDLXMxH4XctScatePD3tPteZ4DPX3Lae%2CL3eaNe%2CPSa3etXMiwiVN5_59biw_ViY3HLeLdDD4SZSMIH%2CNDN3LS4N43eat3S%2CDDNBZZadPNt4ccc%2CLSaDDSccdPdLNSLXBDcZ%2CBX4SLNcXXZ; mp_b36aa4f2a42867e23d8f9907ea741d91_mixpanel=%7B%22distinct_id%22%3A%20%2270225ae4-12af-b4ed-aeaf-8432d3474981%22%2C%22%24initial_referrer%22%3A%20%22https%3A%2F%2Fhelp.vimeo.com%2Fhc%2Fen-us%2Farticles%2F228908367-Albums%22%2C%22%24initial_referring_domain%22%3A%20%22help.vimeo.com%22%7D; _cb_ls=1; __zlcmid=mIhK3DPYCQsGAA; player=""

Last edited by colak (2018-08-09 13:28:19)


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github

Offline

#12 2018-08-09 14:23:00

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 3,065
Website

Re: GDPR in practice – Content from third-parties without cookies?

Nice find. That could indeed be an option.

Please check if that cookie you saw is a leftover from an earlier visit to vimeo.com. I saw a cookie too, then cleared and reloaded and it did not reappear.

BTW it works with both the general and player URL:

https://vimeo.com/api/oembed.json?url=https://vimeo.com/247327862
https://vimeo.com/api/oembed.json?url=https://player.vimeo.com/video/247327862

These also still work for me:

https://vimeo.com/api/v2/video/247327862.json
https://vimeo.com/api/v2/video/247327862.xml

For the thumbnail the vital bit of information you need is the img-thumb number 672633707 part of the url. You can modify / construct the image URL to get a custom width, e.g.

https://i.vimeocdn.com/video/672633707_640.jpg
https://i.vimeocdn.com/video/672633707_1280.jpg
https://i.vimeocdn.com/video/672633707_320x200.jpg

You may be onto something there.


TXP Builders – finely-crafted code, design and txp

Offline

#13 2018-08-09 14:37:06

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 6,801
Website

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.org | hblack.net | LABS | State Machines | NeMe @ github

Offline

#14 2018-08-09 17:33:56

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 3,065
Website

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

#15 2018-08-09 18:31:20

etc
Developer
Registered: 2010-11-11
Posts: 2,833
Website

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" />

etc_[ query | search | pagination | date | tree | cache ]

Offline

#16 2018-08-10 10:25:31

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 6,801
Website

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.org | hblack.net | LABS | State Machines | NeMe @ github

Offline

#17 2018-08-10 11:00:50

etc
Developer
Registered: 2010-11-11
Posts: 2,833
Website

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?


etc_[ query | search | pagination | date | tree | cache ]

Offline

#18 2018-08-10 13:37:12

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 3,065
Website

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

#19 2018-08-13 12:46:29

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 3,065
Website

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

#20 2018-08-13 12:50:30

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 6,801
Website

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.org | hblack.net | LABS | State Machines | NeMe @ github

Offline

Board footer

Powered by FluxBB