---
layout: sidebar-v1
title: Videos
---

<div class="toolbar-v1-fixed-wrap">{{> toolbar-v1}}</div>

<!-- Container -->
<div
  id="video-feed"
  class="container sidebar-boxed"
  data-open-sidebar
  data-page-title="Videos"
>
  <div class="videos-wrapper is-home is-full">
    {{> toolbar-v1}}

    <!-- Homepage content -->
    <div class="home-wrapper">
      <!-- Wrapper -->
      <div class="video-header-wrap">
        <!-- Video Slide -->
        <div class="video-header-outer">
          <div class="video-header">
            <!-- Image -->
            <img
              class="cover"
              src="https://via.placeholder.com/1920x1080"
              data-demo-src="assets/img/demo/video/home/h3.jpg"
              alt=""
            />
            <!-- Overlay -->
            <div class="cover-overlay"></div>
            <!-- Caption -->
            <div class="cover-caption">
              <div class="caption-inner">
                <div class="video-caption">
                  <div class="caption-block">
                    <h2>Forgotten</h2>
                    <div class="video-meta">
                      <span>CCO</span>
                      <span>Horror, Sci-Fi</span>
                      <span class="rating">
                        <i data-feather="star"></i>
                        <i data-feather="star"></i>
                        <i data-feather="star"></i>
                        <i data-feather="star"></i>
                      </span>
                    </div>
                    <p class="description">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      Zenonis est, inquam, hoc Stoici. Omnis enim est natura
                      diligens sui. Utinam quidem dicerent alium alio beatiorem!
                      Iam ruinas videres. Duo Reges: constructio interrete. Sed
                      ad bona praeterita redeamus.
                    </p>
                    <div class="caption-actions">
                      <a class="button is-solid accent-button is-rounded">
                        Start Watching
                      </a>
                      <a class="trailer-button">
                        <i data-feather="play"></i>
                        <span>Watch Trailer</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Video Slide -->
        <div class="video-header-outer">
          <div class="video-header">
            <!-- Image -->
            <img
              class="cover"
              src="https://via.placeholder.com/1920x1080"
              data-demo-src="assets/img/demo/video/home/h1.jpg"
              alt=""
            />
            <!-- Overlay -->
            <div class="cover-overlay"></div>
            <!-- Caption -->
            <div class="cover-caption">
              <div class="caption-inner">
                <div class="video-caption">
                  <div class="caption-block">
                    <h2>The Old Caban</h2>
                    <div class="video-meta">
                      <span>CCO</span>
                      <span>Fantasy, Horror</span>
                      <span class="rating">
                        <i data-feather="star"></i>
                        <i data-feather="star"></i>
                        <i data-feather="star"></i>
                        <i data-feather="star"></i>
                        <i data-feather="star"></i>
                      </span>
                    </div>
                    <p class="description">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      Zenonis est, inquam, hoc Stoici. Omnis enim est natura
                      diligens sui. Utinam quidem dicerent alium alio beatiorem!
                      Iam ruinas videres. Duo Reges: constructio interrete. Sed
                      ad bona praeterita redeamus.
                    </p>
                    <div class="caption-actions">
                      <a class="button is-solid accent-button is-rounded">
                        Start Watching
                      </a>
                      <a class="trailer-button">
                        <i data-feather="play"></i>
                        <span>Watch Trailer</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Video Slide -->
        <div class="video-header-outer">
          <div class="video-header">
            <!-- Image -->
            <img
              class="cover"
              src="https://via.placeholder.com/1920x1080"
              data-demo-src="assets/img/demo/video/home/h2.jpg"
              alt=""
            />
            <!-- Overlay -->
            <div class="cover-overlay"></div>
            <!-- Caption -->
            <div class="cover-caption">
              <div class="caption-inner">
                <div class="video-caption">
                  <div class="caption-block">
                    <h2>Eaten Alive</h2>
                    <div class="video-meta">
                      <span>CCO</span>
                      <span>Horror, Thriller</span>
                      <span class="rating">
                        <i data-feather="star"></i>
                        <i data-feather="star"></i>
                        <i data-feather="star"></i>
                        <i data-feather="star"></i>
                        <i data-feather="star"></i>
                      </span>
                    </div>
                    <p class="description">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      Zenonis est, inquam, hoc Stoici. Omnis enim est natura
                      diligens sui. Utinam quidem dicerent alium alio beatiorem!
                      Iam ruinas videres. Duo Reges: constructio interrete. Sed
                      ad bona praeterita redeamus.
                    </p>
                    <div class="caption-actions">
                      <a class="button is-solid accent-button is-rounded">
                        Start Watching
                      </a>
                      <a class="trailer-button">
                        <i data-feather="play"></i>
                        <span>Watch Trailer</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Home content -->
      <div class="home-content">
        <div class="collections-header">
          <a class="is-active">Latest</a>
          <a>Subscribed</a>
          <a>Related</a>
          <div class="search-button">
            <i data-feather="search"></i>
          </div>
        </div>

        <div class="collections-wrap is-active">
          <div class="collection">
            <div class="header">
              <h4>Shows & Movies</h4>
              <a>Show More</a>
            </div>
            <div class="video-collection">
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">01:39:43</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c17.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/metamovies.svg"
                    data-page-popover="2"
                    alt=""
                  />
                  <div class="info">
                    <span>The Old Caban</span>
                    <span>Meta Movies</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">01:26:17</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c18.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/metamovies.svg"
                    data-page-popover="2"
                    alt=""
                  />
                  <div class="info">
                    <span>Eaten Alive</span>
                    <span>Meta Movies</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">02:31:54</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c19.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/metamovies.svg"
                    data-page-popover="2"
                    alt=""
                  />
                  <div class="info">
                    <span>Forgotten</span>
                    <span>Meta Movies</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">02:03:17</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c20.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/vector/icons/logos/metamovies.svg"
                    data-page-popover="2"
                    alt=""
                  />
                  <div class="info">
                    <span>The Wastelands</span>
                    <span>Meta Movies</span>
                  </div>
                </div>
              </a>
            </div>
          </div>
          <!-- Collection -->
          <div class="collection">
            <div class="header">
              <h4>Gaming</h4>
              <a>Show More</a>
            </div>
            <div class="video-collection">
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">02:13:49</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c1.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/brian.jpg"
                    data-user-popover="19"
                    alt=""
                  />
                  <div class="info">
                    <span>The best keyboards for 2019!</span>
                    <span>Brian Stevenson</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">00:26:17</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c2.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/dan.jpg"
                    data-user-popover="1"
                    alt=""
                  />
                  <div class="info">
                    <span>Exclusive limited unboxing</span>
                    <span>Dan Walker</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">01:12:31</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c3.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/dan.jpg"
                    data-user-popover="1"
                    alt=""
                  />
                  <div class="info">
                    <span>I was at the VidCon 2019</span>
                    <span>Dan Walker</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">00:12:06</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c4.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/david.jpg"
                    data-user-popover="5"
                    alt=""
                  />
                  <div class="info">
                    <span>Our plans for Alien Invasion</span>
                    <span>David Kim</span>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <div class="collection">
            <div class="header">
              <h4>Fashion</h4>
              <a>Show More</a>
            </div>
            <div class="video-collection">
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">00:19:41</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c5.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/stella.jpg"
                    data-user-popover="2"
                    alt=""
                  />
                  <div class="info">
                    <span>5 new trendy outfits</span>
                    <span>Stella Bergmann</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">00:10:41</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c6.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/milly.jpg"
                    data-user-popover="7"
                    alt=""
                  />
                  <div class="info">
                    <span>Make your makeups glossy</span>
                    <span>Milly Augustine</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">00:06:12</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c7.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/lana.jpeg"
                    data-user-popover="10"
                    alt=""
                  />
                  <div class="info">
                    <span>Our latest lipsticks</span>
                    <span>Lana Henrikssen</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">00:03:27</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c8.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/nelly.png"
                    data-user-popover="10"
                    alt=""
                  />
                  <div class="info">
                    <span>Colombia festival is on</span>
                    <span>Nelly Schwartz</span>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <div class="collection">
            <div class="header">
              <h4>Food</h4>
              <a>Show More</a>
            </div>
            <div class="video-collection">
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">00:01:36</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c9.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/mike.jpg"
                    data-user-popover="12"
                    alt=""
                  />
                  <div class="info">
                    <span>Tasty home made gummies</span>
                    <span>Mike Lasalle</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">00:07:28</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c10.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/mike.jpg"
                    data-user-popover="12"
                    alt=""
                  />
                  <div class="info">
                    <span>Raspberry cupcakes in 5 minutes</span>
                    <span>Mike Lasalle</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">00:05:02</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c11.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/elise.jpg"
                    data-user-popover="6"
                    alt=""
                  />
                  <div class="info">
                    <span>Ways to citrus and dragon</span>
                    <span>Elise Walker</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">00:06:12</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c12.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/lana.jpeg"
                    data-user-popover="10"
                    alt=""
                  />
                  <div class="info">
                    <span>The purple banana</span>
                    <span>Lana Henrikssen</span>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <div class="collection">
            <div class="header">
              <h4>Automotive</h4>
              <a>Show More</a>
            </div>
            <div class="video-collection">
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">00:18:49</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c13.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/edward.jpeg"
                    data-user-popover="5"
                    alt=""
                  />
                  <div class="info">
                    <span>I tried the new Class E</span>
                    <span>Edward Mayers</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">00:21:38</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c14.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/edward.jpeg"
                    data-user-popover="5"
                    alt=""
                  />
                  <div class="info">
                    <span>I tried the new Bolt 403</span>
                    <span>Edward Mayers</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">00:17:11</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c15.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/edward.jpeg"
                    data-user-popover="5"
                    alt=""
                  />
                  <div class="info">
                    <span>I tried the new Supra RX</span>
                    <span>Edward Mayers</span>
                  </div>
                </div>
              </a>
              <!-- Episode -->
              <a class="episode">
                <div class="episode-thumbnail">
                  <div class="episode-overlay"></div>
                  <div class="episode-duration">00:14:38</div>
                  <div class="play-button">
                    <i data-feather="play-circle"></i>
                  </div>
                  <img
                    src="https://via.placeholder.com/320x200"
                    data-demo-src="assets/img/demo/video/home/collections/c16.jpg"
                    alt=""
                  />
                </div>
                <div class="episode-meta">
                  <img
                    src="https://via.placeholder.com/150x150"
                    data-demo-src="assets/img/avatars/edward.jpeg"
                    data-user-popover="5"
                    alt=""
                  />
                  <div class="info">
                    <span>I tried the new Baratini DX</span>
                    <span>Edward Mayers</span>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <!-- Load more posts -->
          <div class="load-more-wrap has-text-centered">
            <a href="#" class="load-more-button">Load More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>