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.
Tabs layout
View code <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> Carousel layout
View code <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> Grid layout
View code <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.
