Vimeo/Youtube Kirbytext extension.

.readme.md

Vimeo/Youtube Kirbytext extension

Place this php file in the site/plugins folder of your kirby install. The plugin strips the video id from the end of both Vimeo and Youtube links.

Use the kirbytag like this:

(video: vimeo.com/79338229) (video: youtube.com/watch?v=0--NbrJX_xQ) (video: youtu.be/0--NbrJX_xQ)

The embed code is wrapped in a div with a class called "Flexible-container".

The coresponding CSS allows for fluid video embeds which scale to the width of the parent div.

For more information on kirbytags, see the Extending Kirbytext documentation.

kirbytext.extended.php

<?php 

class kirbytextExtended extends kirbytext {
  
  function __construct($text, $markdown=true) {
    
    parent::__construct($text, $markdown);
    
    // define custom tags
    $this->addTags('video');
                    
  }  

  function video($params) {
      
    if(str::contains($params['video'], "vimeo.com")):;
    
    //Get last 8 characters from vimeo url
    $vimeoid = substr( $params['video'], -8 );
    //return embed code
    return '<div class="Flexible-container"><iframe src="http://player.vimeo.com/video/'. urlencode($vimeoid). '?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;color=808080" width="500" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></div>';

    elseif(str::contains($params['video'], "youtube.com") || str::contains($params['video'], "youtu.be")):;
    //Get last 11 characters from youtube url
    $youtubeid = substr( $params['video'], -11 );
    //return embed code
    return '<div class="Flexible-container"><iframe width="560" height="315" src="//www.youtube.com/embed/'. $youtubeid .'" frameborder="0" allowfullscreen></iframe></div>';

  endif;
  }

}

?>

style.css

/*  Flexible iFrame
    CSS taken from Niklaus Gerber's Rapid Bootstrap V3
    https://github.com/niklausgerber/Rapid-Bootstrap-V3
*/    

.Flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.Flexible-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Just realized that the built in (vimeo: ) and (youtube: ) tags now have a div wrapper with a class of video-container.

I guess the one slight difference is that this plugin adds some custom (hard coded )options to the Vimeo embed.
White link color, no title, no byline, just the video.