Video libraries

Display YouTube videos in your help center using one of several fully customizable and interactive layouts.

There are three general style of video library available: tabs, carousel and grid. Each can be fully customized by making changes to the micro-template.

<div data-element="video-library" data-ids="f2tu2G5MYH4, flMArfQZpww, YQDOIam90us, YCh1YKdliXY" data-layout="tabs" data-template="video-library"></div>
<template id="tmpl-video-library">
  <% if (ids.length) { %>
    <div class="bg-gray-100 p-3">
      <div class="row row-flush">
        <div class="md:col-8">
          <ul class="tabs list-unstyled mb-0">
            <% ids.forEach(function(id, index) { %>
              <li class="tab content fade<% if (index === 0) { %> is-active is-shown<% } %>" id="video-<%= id %>" role="tab-panel">
                <% if (playInline) { %>
                  <div class="relative w-full ratio ratio-16-9">
                    <div class="relative z-20" id="<%= id %>"></div>
                    <div class="absolute-center z-10 flex p-4 circle button button-primary">
                      <svg class=" w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <path d="M78.627,47.203L24.873,16.167c-1.082-0.625-2.227-0.625-3.311,0C20.478,16.793,20,17.948,20,19.199V81.27  c0,1.25,0.478,2.406,1.561,3.031c0.542,0.313,1.051,0.469,1.656,0.469c0.604,0,1.161-0.156,1.703-0.469l53.731-31.035  c1.083-0.625,1.738-1.781,1.738-3.031C80.389,48.984,79.71,47.829,78.627,47.203z"/>
                      </svg>
                    </div>
                  </div>
                <% } else { %>
                  <a class="relative block w-full ratio ratio-16-9" data-url="<%= id %>" data-fancybox href="#">
                    <div class="relative z-20" id="<%= id %>"></div>
                    <div class="absolute-center z-10 flex p-4 circle button button-primary">
                      <svg class=" w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <path d="M78.627,47.203L24.873,16.167c-1.082-0.625-2.227-0.625-3.311,0C20.478,16.793,20,17.948,20,19.199V81.27  c0,1.25,0.478,2.406,1.561,3.031c0.542,0.313,1.051,0.469,1.656,0.469c0.604,0,1.161-0.156,1.703-0.469l53.731-31.035  c1.083-0.625,1.738-1.781,1.738-3.031C80.389,48.984,79.71,47.829,78.627,47.203z"/>
                      </svg>
                    </div>
                  </a>
                <% } %>
              </li>
            <% }); %>
          </ul>
        </div>
        <div class="md:col overflow-y-scroll">
          <div class="relative md:ml-3">
            <div class="md:absolute h-full w-full">
              <nav class="nav flex-column mt-6 md:my-0">
                <% ids.forEach(function(id, index) { %>
                  <a class="nav-link flex text-inherit border border-radius border-transparent transition<% if (index === 0) { %> text-primary border-primary bg-white is-active is-shown<% } %>" data-active-class="text-primary border-primary bg-white" href="#video-<%= id %>" data-toggle="tab" role="tab" aria-expanded="<% if (index === 0) { %>true<% } else { %>false<% } %>">
                    <div class="relative align-self-center h-8 w-8 overflow-hidden <% if (!showTitle && !showDuration) { %>mx-auto<% } else { %>mr-3<% } %>">
                      <img class="absolute-center" data-thumbnail="<%= id %>" alt="Video thumbnail">
                    </div>
                    <% if (showTitle || showDuration) { %>
                      <div class="relative media-body">
                        <% if (showTitle) { %>
                          <h5 class="my-1 text-inherit" data-title="<%= id %>"></h5>
                        <% } %>
                        <% if (showDuration) { %>
                          <span class="badge" data-duration="<%= id %>"></span>
                        <% } %>
                      </div>
                    <% } %>
                  </a>
                <% }); %>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  <% } %>
</template>
<div data-element="video-library" data-ids="f2tu2G5MYH4, flMArfQZpww, YQDOIam90us, YCh1YKdliXY" data-layout="carousel" data-template="video-library"></div>
<template id="tmpl-video-library">
  <% if (ids.length) { %>
    <ul class="relative z-10 list-unstyled swiper-wrapper flex-no-wrap">
      <% ids.forEach(function(id, index) { %>
        <li class="swiper-slide">
          <% if (playInline) { %>
            <div class="relative w-full ratio ratio-16-9">
              <div class="relative z-20" id="<%= id %>"></div>
              <div class="absolute-center z-10 flex p-4 circle button button-primary">
                <svg class=" w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                  <path d="M78.627,47.203L24.873,16.167c-1.082-0.625-2.227-0.625-3.311,0C20.478,16.793,20,17.948,20,19.199V81.27  c0,1.25,0.478,2.406,1.561,3.031c0.542,0.313,1.051,0.469,1.656,0.469c0.604,0,1.161-0.156,1.703-0.469l53.731-31.035  c1.083-0.625,1.738-1.781,1.738-3.031C80.389,48.984,79.71,47.829,78.627,47.203z"/>
                </svg>
              </div>
              <% if (showDuration) { %>
                <span class="absolute bottom-0 right-0 top-auto m-4 badge" data-duration="<%= id %>"></span>
              <% } %>
            </div>
          <% } else { %>
            <a class="relative block w-full ratio ratio-16-9" data-url="<%= id %>" data-fancybox href="#">
              <div class="relative z-20" id="<%= id %>"></div>
              <div class="absolute-center z-10 flex p-4 circle button button-primary">
                <svg class=" w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                  <path d="M78.627,47.203L24.873,16.167c-1.082-0.625-2.227-0.625-3.311,0C20.478,16.793,20,17.948,20,19.199V81.27  c0,1.25,0.478,2.406,1.561,3.031c0.542,0.313,1.051,0.469,1.656,0.469c0.604,0,1.161-0.156,1.703-0.469l53.731-31.035  c1.083-0.625,1.738-1.781,1.738-3.031C80.389,48.984,79.71,47.829,78.627,47.203z"/>
                </svg>
              </div>
              <% if (showDuration) { %>
               <span class="absolute bottom-0 right-0 top-auto m-4 badge" data-duration="<%= id %>"></span>
              <% } %>
            </a>
          <% } %>
          <% if (showTitle) { %>
            <h3 class="h4 my-4" data-title="<%= id %>"></h3>
          <% } %>
        </li>
      <% }); %>
    </ul>
  <% } %>
  <div class="absolute z-20 top-0 right-0 h-full flex align-items-center justify-content-center pointer-events-none<% if (showTitle) { %> -mt-6<% } %>">
    <svg class="swiper-next w-6 h-9 p-2 mx-1 border-radius button button-primary fill-current cursor-pointer transition" style="pointer-events: all;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <path d="M32.792,94.602L32.792,94.602c-0.53,0-1.039-0.211-1.414-0.586l-8.2-8.201c-0.781-0.781-0.781-2.047,0-2.828l32.999-32.999  L23.178,16.989c-0.781-0.781-0.781-2.047,0-2.828l8.2-8.201c0.75-0.75,2.078-0.751,2.828,0l42.616,42.612  c0.487,0.487,0.671,1.163,0.55,1.792c-0.071,0.381-0.255,0.746-0.55,1.041L34.206,94.016C33.831,94.391,33.322,94.602,32.792,94.602  z"/>
    </svg>
  </div>
  <div class="absolute z-20 top-0 left-0 h-full flex align-items-center justify-content-center pointer-events-none<% if (showTitle) { %> -mt-6<% } %>">
    <svg class="swiper-prev w-6 h-9 p-2 mx-1 border-radius button button-primary fill-current cursor-pointer transition" style="pointer-events: all;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <path d="M67.208,94.614c-0.53,0-1.039-0.21-1.414-0.586L23.178,51.416c-0.487-0.487-0.671-1.163-0.55-1.792  c0.071-0.381,0.255-0.746,0.55-1.041L65.794,5.972c0.375-0.375,0.884-0.586,1.414-0.586l0,0c0.53,0,1.039,0.211,1.414,0.586  l8.2,8.201c0.781,0.781,0.781,2.047,0,2.828L43.823,50l32.999,32.999c0.781,0.781,0.781,2.047,0,2.828l-8.2,8.201  C68.247,94.403,67.738,94.614,67.208,94.614z"/>
    </svg>
  </div>
</template>
<div data-element="video-library" data-ids="f2tu2G5MYH4, flMArfQZpww, YQDOIam90us, YCh1YKdliXY" data-layout="grid" data-template="video-library"></div>
<template id="tmpl-video-library">
  <% if (ids.length) { %>
    <ul class="list-unstyled row">
      <% ids.forEach(function(id, index) { %>
        <li class="mb-6 md:col-6">
          <div class="relative w-full ratio ratio-16-9">
            <% if (playInline) { %>
              <div class="relative w-full ratio ratio-16-9">
                <div class="relative z-20" id="<%= id %>"></div>
                <div class="absolute-center z-10 flex p-4 circle button button-primary">
                  <svg class=" w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M78.627,47.203L24.873,16.167c-1.082-0.625-2.227-0.625-3.311,0C20.478,16.793,20,17.948,20,19.199V81.27  c0,1.25,0.478,2.406,1.561,3.031c0.542,0.313,1.051,0.469,1.656,0.469c0.604,0,1.161-0.156,1.703-0.469l53.731-31.035  c1.083-0.625,1.738-1.781,1.738-3.031C80.389,48.984,79.71,47.829,78.627,47.203z"/>
                  </svg>
                </div>
              </div>
            <% } else { %>
              <a class="relative block w-full ratio ratio-16-9" data-url="<%= id %>" data-fancybox href="#">
                <div class="relative z-20" id="<%= id %>"></div>
                <div class="absolute-center z-10 flex p-4 circle button button-primary">
                  <svg class=" w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M78.627,47.203L24.873,16.167c-1.082-0.625-2.227-0.625-3.311,0C20.478,16.793,20,17.948,20,19.199V81.27  c0,1.25,0.478,2.406,1.561,3.031c0.542,0.313,1.051,0.469,1.656,0.469c0.604,0,1.161-0.156,1.703-0.469l53.731-31.035  c1.083-0.625,1.738-1.781,1.738-3.031C80.389,48.984,79.71,47.829,78.627,47.203z"/>
                  </svg>
                </div>
              </a>
            <% } %>
            <% if (showDuration) { %>
              <span class="absolute bottom-0 right-0 top-auto m-4 badge" data-duration="<%= id %>"></span>
            <% } %>
          </div>
          <% if (showTitle) { %>
            <h3 class="h4 my-4" data-title="<%= id %>"></h3>
          <% } %>
        </li>
      <% }); %>
    </ul>
  <% } %>
</template>

Video libraries are very versatile and can be used anywhere in the help center.

Video libraries can be added to the Home page (home_page.hbs) using the Promoted video IDs theme setting in the Home page elements setting group. Simply enter one or more YouTube video IDs in a comma-separated list to have them appear in the default style of your theme.

To replace the default layout, copy-and-paste just the template code of your chosen pattern into the bottom of the Home page or Footer (footer.hbs) page templates.

<template id="tmpl-video-library">
  ...
</template>

To have a video library appear with your chosen layout anywhere in the help center, copy-and-paste both the video library element and template into the desired position one or more page templates.

<div data-element="video-library" ... ></div>
<template id="tmpl-video-library">
  ...
</template>

If you’re creating a custom carousel layout and would like to use the built-in Swiper plugin be sure to set the extension layout option to “carousel”. This can be done using a data-layout="carousel" attribute on the video library element.

Related patterns