{% load markdown_filters %}

<div class="card card-default">
    <div class="card-body">
        <h1>
            Videos
        </h1>
        <h3>
            YouTube
        </h3>
        <p>
            Go to <a href="https://youtube.com">youtube.com</a>, find your video, click on "share" and from the link "https://youtu.be/{id}" copy only the id. Width and height are optional and will be 100% and 720px by default.
        </p>
        <pre><code>youtube:{video_id}:{width}:{height}

youtube:{video_id}</code></pre>
        <h4>
            Examples
        </h4>
        <pre><code>youtube:HTpqdiDNY88:100%:700px

youtube:HTpqdiDNY88</code></pre>
        {{ "youtube:HTpqdiDNY88:100%:700px"|markdown|safe }}
        <hr>

        <h3>
            Vimeo
        </h3>
        {{ "alert:warning:**Warning:** This is an untested feature."|markdown|safe }}
        <pre><code>vimeo:{video_id}:{width}:{height}

vimeo:{video_id}</code></pre>
    </div>
</div>