Video Card

<div class="video-cards" role="list">
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Architektur nachdokumentieren</h4>
            <h5 class="video-card__subtitle">arc42 für bestehende Systeme</h5>
            <p class="video-card__date standalone">05.08.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/gernot-starke/">Gernot Starke</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/78KJt4EOfFE?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Sparsame Dokumentation</h4>
            <h5 class="video-card__subtitle">arc42 in Aktion: Praktische Tipps</h5>
            <p class="video-card__date standalone">29.07.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/gernot-starke/">Gernot Starke</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/2tlg0B60ef8?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Remote Mob Programming</h4>
            <h5 class="video-card__subtitle">Teamwork im Homeoffice</h5>
            <p class="video-card__date standalone">15.07.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/jochen-christ/">Jochen Christ</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/XyigGJKFWQc?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Typen und Tippen</h4>
            <h5 class="video-card__subtitle">Datengetriebene Typen in Idris</h5>
            <p class="video-card__date standalone">01.07.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/jan-stepien/">Jan Stępień</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/T5rZTa-xXwU?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">OpenSSL</h4>
            <h5 class="video-card__subtitle">Was Du schon immer darüber wissen wolltest</h5>
            <p class="video-card__date standalone">24.06.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/ci/">Christoph Iserlohn</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/CnI7n4_RhtI?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Blockchain Use Cases</h4>
            <h5 class="video-card__subtitle">When does Blockchain really make sense?</h5>
            <p class="video-card__date standalone">17.06.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/lars-hupel/">Dr. Lars Hupel</a>, <a href="/de/staff/stefan-tilkov/">Stefan Tilkov</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/sP5h1a1a6iA?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Some Fixes</h4>
            <h5 class="video-card__subtitle">Commit Messages und Code richtig schreiben</h5>
            <p class="video-card__date standalone">10.06.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/benjamin-wolf/">Benjamin Wolf</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/yM3HgT1YK9s?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">CSS Grid</h4>
            <h5 class="video-card__subtitle">Responsive Web Layout</h5>
            <p class="video-card__date standalone">03.06.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/joy-heron/">Joy Heron</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/aDTA0Aaxyx4?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Service Mesh</h4>
            <h5 class="video-card__subtitle">Ein kritischer Blick auf die neue Infrastruktur</h5>
            <p class="video-card__date standalone">27.05.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/hanna-prinz/">Hanna Prinz</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/cTfp7It1eEo?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Software Architecture</h4>
            <h5 class="video-card__subtitle">for Agile Enterprises</h5>
            <p class="video-card__date standalone">20.05.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/stefan-tilkov/">Stefan Tilkov</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/_XcVRbqWiG8?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Organisation</h4>
            <h5 class="video-card__subtitle">Ein Werkzeug für Software-Architektur</h5>
            <p class="video-card__date standalone">13.05.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/eberhard-wolff/">Eberhard Wolff</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/F73TBLMd71w?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
    <div class="video-card">
        <div class="video-card__head">
            <h4 class="video-card__title">Software-Modernisierung</h4>
            <h5 class="video-card__subtitle">mit Wardley Maps</h5>
            <p class="video-card__date standalone">22.04.2020</p>
            <p class="video-card__speaker standalone">
                <a href="/de/staff/markus-harrer/">Markus Harrer</a>
            </p>
        </div>
        <div class="video-card__video embed-responsive embed-responsive--16by9">
            <iframe src="https://www.youtube-nocookie.com/embed/ARp3EIUCKM4?rel=0&amp;showinfo=0"
                class="embed-responsive-item" width="560" height="315" allowfullscreen="" frameborder="0"
                allow="autoplay; encrypted-media"></iframe>
        </div>
    </div>
</div>