This will serve as documentation for Video bands.
A video band is a slider with videos on a subject. An example of this can currently be seen on the homepage of about.gitlab.com.
You don't have to create a new carousel identifier, it's alright to edit a preexisting carousel. You can add more items to a group or replace/remove existing items in the list.
Each set of videos that you want to display is a group defined in the data video_carousel yml file.
When someone provides you with a URL for a youtube video, it needs to be in the following format.
https://www.youtube.com/embed/numbersandletters
URL formats that will not work:
https://www.youtube.com/watch?v=numbersandletters
https://youtu.be/numbersandletters
Playlists
Note that you can usually change the prefix while keeping the suffix numbersandletters value.
The carousel identifier is what you want the name of the carousel to be. Please pick something specific but easy to understand with context such as Events Carousel 1
.
Each video needs a related preview image. There are a couple of options to use depending on the situation. Usually we use the thumbnail that already exists in YouTube's system. If that thumbnail isn't very good or representative then we might create one manually.
To grab the existing image from youtube videos you can use the browser developer tools inspector. You should see something like this from youtube with an image URL:
<div class="ytp-cued-thumbnail-overlay-image" style="background-image: url("https://i.ytimg.com/vi/1GPsepFmNes/maxresdefault.jpg");"></div>
An example implementation of the video bands can currently be seen in the homepage code. Note that you'll want to switch out the include?("Homepage Carousel 1")
with the carousel identifier that you defined above. You might also want to update the H2 tag Featured videos
title, depending on the situation.
.container.u-margin-top-40
%h2.u-margin-bottom-sm.text-center
Featured videos
.video-slider
- data.video_carousel.each do |video|
-if video.carousel_identifier.include?("Homepage Carousel 1")
= partial "includes/components/video-carousel/video-item", locals: {name: video.name, title: video.title, company: video.company, photourl: video.photourl, videolink: video.video_link}
- data.video_carousel.each do |video|
-if video.carousel_identifier.include?("Homepage Carousel 1")
= partial "includes/components/video-carousel/video-carousel-modal", locals: {videolink: video.video_link, title: video.title}
In the frontmatter, add the following items:
extra_css:
- bl-modal.css
- video-carousel.css
extra_js:
- libs/slick.min.js
- video-carousel.js
Because of a combination of factors, in order to preview the video bands you'll need to TEMPORARILY add the following to the page frontmatter. Do not merge the page into master until you remove manual_cookiebot from your project after it has been verified and reviewed.
---
(normal frontmatter stuff)
manual_cookiebot: true
---