How to edit the output of vimeo / youtube functions

The CMS Questions
1

Hi there,
I’m using the vimeo() and youtube() functions in my Kirby 2 site, but am trying to make it compliant with the GDPR cookies law, so I need to change the output iframe code from e.g.

<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxxxxx" frameborder="0" allowfullscreen></iframe>

to e.g.

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/xxxxxxxxx" data-categories="advertising" frameborder="0" allowfullscreen></iframe>

so that the cookie consent tool can allow / block them (these are the instructions I’m following: https://docs.termly.io/how-to-block-third-party-cookies/manual-blocking#manual-blocking-of-iframe-embed-object-link-third-party-cookies)

Could anyone point me in the right direction - being a designer really I’m getting a little lost searching in the code for how to do it!

Thanks in advance,
Rach

2

I’d suggest you override those tags in /site/tags with a tag with the same name and change the parts that need to be changed.

The YouTube tag used the embedclass to embed the iframe:

 return '<figure class="' . $tag->attr('class', kirby()->option('kirbytext.video.class', 'video')) . '">' . embed::youtube($tag->attr('youtube'), array(
      'width'   => $tag->attr('width',  kirby()->option('kirbytext.video.width')),
      'height'  => $tag->attr('height', kirby()->option('kirbytext.video.height')),
      'options' => kirby()->option('kirbytext.video.youtube.options')
    )) . $figcaption . '</figure>';

This is the embed::Youtube() method:

public static function youtube($url, $attr = array()) {

    // youtube embed domain
    $domain = 'youtube.com';

    // http://www.youtube.com/embed/d9NF2edxy-M
    if(preg_match('!youtube.com\/embed\/([a-z0-9_-]+)!i', $url, $array)) {
      $id = $array[1];
    // https://www.youtube-nocookie.com/embed/d9NF2edxy-M
    } else if(preg_match('!youtube-nocookie.com\/embed\/([a-z0-9_-]+)!i', $url, $array)) {
      $id     = $array[1];
      $domain = 'www.youtube-nocookie.com';
    // http://www.youtube.com/watch?feature=player_embedded&v=d9NF2edxy-M#!
    } elseif(preg_match('!v=([a-z0-9_-]+)!i', $url, $array)) {
      $id = $array[1];
    // http://youtu.be/d9NF2edxy-M
    } elseif(preg_match('!youtu.be\/([a-z0-9_-]+)!i', $url, $array)) {
      $id = $array[1];
    }

    // no id no result!
    if(empty($id)) return false;

    // default options
    if(!empty($attr['options'])) {
      $options = '?' . http_build_query($attr['options']);      
      // options should not propagate to the attr list
      unset($attr['options']);
    } else {
      $options = '';
    }

    // default attributes
    $attr = array_merge(array(
      'src'                   => '//' . $domain . '/embed/' . $id . $options,
      'frameborder'           => '0',
      'webkitAllowFullScreen' => 'true',
      'mozAllowFullScreen'    => 'true',
      'allowFullScreen'       => 'true',
      'width'                 => '100%',
      'height'                => '100%',
    ), $attr);

    return html::tag('iframe', '', $attr);

  }

So you could manually replace that code in the tag.

1 Like
3

Alternatively you could use something like LazyFrame which defers the loading of the video until a user interacts with it, so the Cookies don’t drop until that point. You could fire it from the cookie acceptance script i think, so it won’t work until they accept cookies. However, you would still need modify the tag described by @texnixe above to add the data attributes.

4

Thanks @texnixe and @jimbobrjames!

I’m afraid I’m still a little lost… sorry - I don’t suppose you’d be able to give me an example of where I’d edit that code to change e.g. ‘src’ to ‘data-src’ or add in the ‘data-categories’ attribute.

Sorry, and thanks again!
Rach

5

This code:

embed::youtube($tag->attr('youtube')

needs to be replaced. The second part of what I posted above is the code that generates the iframe.

So instead of using this method, you would create your own myYoutube (or whatever you want to call it) function in a plugin that basically takes the original code, then make the relevant changes.

   $attr = array_merge(array(
      'data-src'              => '//' . $domain . '/embed/' . $id . $options,
      'data-category'         => 'whatever',
      'frameborder'           => '0',
      'webkitAllowFullScreen' => 'true',
      'mozAllowFullScreen'    => 'true',
      'allowFullScreen'       => 'true',
      'width'                 => '100%',
      'height'                => '100%',
    ), $attr);

Then instead of calling embed::youtube($tag->attr('youtube') you call your new function.