Name:
    Youtube Live Stream

Tag Name:
    livestream

Tag Type:
    Inline

Description:
    A shortcode for embeding all future livestreams to your YouTube account.

Documentation:
    This will put your future live events onto your page in a responsive container. There are options that you can configure

    Basic Usage:

    {[ livestream id:'8kpHK4YIwY4' ]}

    Options:

    id (required) – The YouTube Chanel ID. You can get it from this link. https://www.youtube.com/account_advanced
    width (100%) – The width you would like the video to be. By default it will be 100% but you can provide any width in percentages, pixels, or any other valid CSS unit of measure.
    showinfo (false) – This determines if the name of the video and other information should be shown at the top of the video.
    controls (true) – This determines if the standard YouTube controls should be shown.
    autoplay (true) – Should the video start playing once the page is loaded?

Shortcode:

    {% assign wrapperId = uniqueid %}
    {% assign parts = id | Split:'/' %}
    {% assign id = parts | Last %}
    {% assign parts = id | Split:'=' %}
    {% assign id = parts | Last | Trim %}
    {% assign url = 'https://www.youtube.com/embed/live_stream?channel=' | Append:id | Append:'' %}
    {% assign showinfo = showinfo | AsBoolean %}
    {% assign controls = controls | AsBoolean %}
    {% assign autoplay = autoplay | AsBoolean %}

    {% if showinfo %}
        {% assign url = url | Append:'&showinfo=1' %}
    {% else %}
        {% assign url = url | Append:'&showinfo=0' %}
    {% endif %}

    {% if controls %}
        {% assign url = url | Append:'&controls=1' %}
    {% else %}
        {% assign url = url | Append:'&controls=0' %}
    {% endif %}

    {% if autoplay %}
        {% assign url = url | Append:'&autoplay=1' %}
    {% else %}
        {% assign url = url | Append:'&autoplay=0' %}
    {% endif %}

    <style>

    #{{ wrapperId }} {
        width: {{ width }};
    }

    .embed-container { 
        position: relative; 
        padding-bottom: 56.25%; 
        height: 0; 
        overflow: hidden; 
        max-width: 100%; } 
    .embed-container iframe, 
    .embed-container object, 
    .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    </style>

    <div id='{{ wrapperId }}'>
        <div class='embed-container'><iframe src='{{ url }}' frameborder='0' allowfullscreen></iframe></div>
    </div>

Parameters:
    showinfo: false
    controls: true
    autoplay: false
    width: 100%