Skip to content

Instantly share code, notes, and snippets.

@ian-cox

ian-cox/.readme.md

Last active December 29, 2015 14:49
Download ZIP

Revisions

  1. ian-cox renamed this gist Nov 28, 2013. 1 changed file with 0 additions and 0 deletions.
    0 readme.md → .readme.md
    View file
    File renamed without changes.
  2. ian-cox renamed this gist Nov 28, 2013. 1 changed file with 0 additions and 0 deletions.
    0 .readme.md → readme.md
    View file
    File renamed without changes.
  3. ian-cox revised this gist Nov 28, 2013. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion .readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,8 @@ Use the kirbytag like this:
    (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 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](http://getkirby.com/blog/kirbytext).
  4. ian-cox revised this gist Nov 28, 2013. 1 changed file with 6 additions and 3 deletions.
    9 changes: 6 additions & 3 deletions .readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,17 @@
    ## Vimeo/Youtube kirbytag Kirbytext extension
    ## 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 kirby tag like this:
    Use the kirbytag like this:

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

    For more information see the [Extending Kirbytext documentation](http://getkirby.com/blog/kirbytext).
    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](http://getkirby.com/blog/kirbytext).


  5. ian-cox renamed this gist Nov 28, 2013. 1 changed file with 7 additions and 3 deletions.
    10 changes: 7 additions & 3 deletions areademe.md → .readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,10 @@ The plugin strips the video id from the end of both Vimeo and Youtube links.

    Use the kirby tag like this:

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

    For more information see the [Extending Kirbytext documentation](http://getkirby.com/blog/kirbytext).


  6. ian-cox renamed this gist Nov 28, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion reademe.md → areademe.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    # Vimeo/Youtube kirbytag Kirbytext extension
    ## Vimeo/Youtube kirbytag 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.
  7. ian-cox revised this gist Nov 28, 2013. 1 changed file with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions reademe.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    # Vimeo/Youtube kirbytag 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 kirby tag like this:

    - (video: vimeo.com/79338229)
    - (video: youtube.com/watch?v=0--NbrJX_xQ)
    - (video: youtu.be/0--NbrJX_xQ)
  8. ian-cox created this gist Nov 28, 2013.
    34 changes: 34 additions & 0 deletions kirbytext.extended.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    <?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;
    }

    }

    ?>
    20 changes: 20 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    /* 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%;
    }