spatial-model-editor.github.io/src/pages/_includes/macros/video_card.njk at main · spatial-model-editor/spatial-model-editor.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{% macro video_card(title, description, video_file, url_code, url_colab, id) %}
<div class="row align-items-center row-cols-1">
  <div class="col-lg-12 col-xxl-12 mb-5">
    <div class="card border-1 shadow-lg" id="{{ id }}">
      <div class="card-body text-center p-4 p-lg-2 pt-2 pt-lg-2">
        <div class="row justify-content-center p-2">
          <div class="col text-start">
            <a class="btn btn-outline-primary" href="{{ url_code }}" role="button">
              <i class="bi bi-file-earmark-code"></i> Source Code
            </a>
          </div>
          <div class="col">
            <h2 class="fs-4 fw-bold">{{ title }}</h2>
          </div>
          <div class="col text-end">
            <a class="btn btn-outline-primary" href="{{ url_colab }}" role="button">
              <i class="bi bi-journal-code"></i> Interactive Notebook
            </a>
          </div>
        </div>
        <div class="row">
          <p>{{ description | safe }}</p>
        </div>
        <div class="row">
          <div class="embed-responsive">
            <video class="embed-responsive-item" controls autoplay loop muted width="100%" max-height="100%">
              <source src="assets/{{ video_file }}" type="video/mp4">
            </video>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endmacro %}