---
collection: flags
section: documentation
sectiontitle: Flags
permalink: /documentation/flags/%basename/
title: %name Flag
parent:
---

{% extends "_layouts/page-sidebar.html.twig" %}

{% set flags = collections.flags | where('type', '==', this.type) %}

{% block aside %}
    <h2 class="mt-0">{{ this.type }} Flags</h2>
    <ul>
        {% for flag in flags | order('filename') %}
            <li>
                <a href="{{ url(flag) }}"
                   class="text-decoration-none"
                >
                    {{- flag.name -}}
                </a>
            </li>
        {% endfor %}
    </ul>

    <p><a href="{{ url(pages['Flags']) }}">Back to Flags</a></p>
{% endblock %}

{% block content %}
    <h1 class="mt-0">{{ this.name }} Flag</h1>

    <p>Abbreviation: {{ this.abbreviation }}</p>

    {{ this.content | markdown }}
{% endblock %}

---
collection: flags
section: documentation
sectiontitle: Flags
permalink: /documentation/flags/%basename/
title: %name Flag
parent:
---

{% extends "_layouts/page-sidebar.html.twig" %}

{% set flags = collections.flags | where('type', '==', this.type) %}

{% block aside %}
    <h2 class="mt-0">{{ this.type }} Flags</h2>
    <ul>
        {% for flag in flags | order('filename') %}
            <li>
                <a href="{{ url(flag) }}"
                   class="text-decoration-none"
                >
                    {{- flag.name -}}
                </a>
            </li>
        {% endfor %}
    </ul>

    <p><a href="{{ url(pages['Flags']) }}">Back to Flags</a></p>
{% endblock %}

{% block content %}
    <h1 class="mt-0">{{ this.name }} Flag</h1>

    <p>Abbreviation: {{ this.abbreviation }}</p>

    {{ this.content | markdown }}

    {% if this.video %}
        <div class="c-video-player">
            <video id="video"
                   width="100%"
                   loop="loop"
                   preload="none"
                   poster="{{ url('/assets/images/documentation/flags/' ~ this.basename ~ '.jpg') }}"
                   controls="controls"
            >
                <source src="{{ url('/assets/videos/documentation/flags/' ~ this.basename ~ '.mp4') }}" type="video/mp4" />
                <source src="{{ url('/assets/videos/documentation/flags/' ~ this.basename ~ '.webm') }}" type="video/webm" />
            </video>
        </div>
    {% endif %}
{% endblock %}

{% block scripts %}
    {% if this.video %}
    <script src="{{ url('/assets/js/plyr.js') }}"></script>
    <script>
        const player = new Plyr('#video', {
            iconUrl: '{{ url("/assets/images/plyr.svg") }}',
            blankVideo: '{{ url("/assets/videos/blank.mp4") }}',
            controls: [
                'play', 'progress', 'fullscreen'
            ],
            disableContextMenu: false
        });
    </script>
    {% endif %}
{% endblock %}

Add the ability to have a video for flag documentation pages.
Add the ability to have a video for flag documentation pages.
