A carousel provides immediate interactivity on your website that can engage your audience, and satisfy their desire to learn more about your products and services. A high-quality carousel can motivate your audience to explore a bit first, and then to click on a call to action button on a slide that interests them.
Along with a caption, and optionally a call to action button, the background of each carousel slide is typically an image. However, wouldn’t it be nice to add a video to some of your carousel slides? Up until now, it has not been easy to accomplish this.
Videos, such as YouTube videos, provide additional rich interactivity. They can be played, paused, made to show captions, even sped up for speed listeners. Videos on carousel slides also can be opened up into their own YouTube page, with a link to your channel, providing even more opportunity to engage with your audience.
The Challenges Faced
Off-the-shelf carousels typically do not come with the ability to display videos instead of just images as the background of your slides. As I worked to add this “killer feature” to an existing image-only carousel, I discovered three major implementation challenges:
- A video can be played, but what if the carousel has an “auto-slide” feature turned on? This means it automatically navigates to the next slide after a period of time. Without special care, the video will be started by the user and then will be slid out of view as the next slide appears. Even worse, the video will still be playing, with the audio still on! If you navigate back to the slide the video was on, you will have already lost your place. No fun, eh? It is imperative to turn off “auto-slide” behavior when you start playing a video.
- Now suppose the opposite issue. Let’s say the user starts playing a video on a slide, and then manually navigates to the next slide. The proper behavior, in this case, is to pause the video before navigating.
- One last issue: when you are playing the video, you probably don’t want to show your caption and call to action button. These get in the way of the video, and it looks visually sloppy.
Each of these three issues requires connecting the carousel API with the video API. In this case, I used the BxSlider API (https://bxslider.com/options/) and the YouTube Iframe API (https://developers.google.com/youtube/iframe_api_reference).
Liferay DXP Video Carousel Implementation
Liferay DXP is our favorite Digital Experience platform at XTIVIA (see Top 5 Reasons to Choose Liferay DXP), and the rest of this article goes through the details on how to implement a Video Carousel on Liferay DXP.
Liferay DXP Video Carousel Structure
The video carousel slide structure source can be found here: https://gist.github.com/bkinseyx/1eeba67e79c1c4c8b88959f430f558e8
Liferay DXP Video Carousel ADT
The ADT (Application Display Content) source can be found here. https://gist.github.com/bkinseyx/4afea3bce38ff53ea453d06a1c706a90
The important bits that I want to point out are:
YouTube script tag is added:
This could probably be moved to the theme. But the idea is to load the YouTube Iframe API asynchronously.
Now we set up the DOM (Document Object Model) for the slider and each slide.
The core part of this is:
We’ll get back to the web content template after this.
Next, now that the DOM is in place, once the YouTube API is finished asynchronously loading, each YouTube video needs its own player initialized.
This is the code to initialize a single video on a single slide.
Note that this solves two of the three of our challenges: Challenge 1: It pauses the auto-slide behavior when a video is played. Challenge 3: It hides the caption wrapper when a video is played and shows it again when it is done playing.
The initSlider code is what we need to solve Challenge 2:
The slider API has to tell us when a slide is changing. This way we can pause the video. The syntax to communicate with the YouTube API is bizarre but basically, we are sending a command to the YouTube iframe in a certain format.
Liferay DXP Video Carousel Web Content Template
The Web Content Template can be found here: https://gist.github.com/bkinseyx/62bc865b758dddfdf2ec5cba89d6718a
The web content template is straightforward, but I wanted to point out the key bit:
The key factor here is to push the sliderVideoIds into the global array. This is so the ADT knows which videos it needs to deal with. I suppose this could have been more cleanly written to introspect the DOM for this information, but for our purposes, this works fine, and I’m willing to make an exception to my usual style prohibition against global vars.
The other important bit here is enablejsapi. This is so we can pause the video when the slider slides to another video (Challenge 2).
On September 25, 2018, the YouTube Iframe API disabled the ability to turn off related videos shown at the end of the video that finished playing. Now all rel=0 does is restrict the related videos to just the videos from your own channel. This illustrates an important point: depending on the constantly changing APIs of megacorporations whose goals and motivations may conflict with your own is dangerous. Things can and will change.
The Video Carousel works great and is tested on Liferay DXP 7.1. There are clearly technical challenges with implementing a solid Video Carousel, but they can be overcome.
If you have any questions at all, please engage with us via comments on this blog post, or reach out to us at https://www.xtivia.com/contact/.