How to Effectively Display MP4 and YouTube Videos in a Slider Using slick.js

This time, as one method to display videos attractively on a web page, we will introduce how to use slick.js to display MP4 and YouTube videos in a slider.
This technique will be especially useful for engineers and web creators who want to take advantage of video content.

Since both MP4 and YouTube videos are supported, it works on smartphones as well. However, note that Safari on iPhone does not allow videos to autoplay.

What is slick.js?

slick.js is one of the jQuery plugins that provides slider functionality with various customization options.
It supports not only images but also videos and iframe embeds, and it is strong in responsive design, making it ideal for display on smartphones and tablets.

Benefits of Displaying MP4 and YouTube Videos in a Slider

• Visual appeal: Videos contain more information than still images and can easily capture users’ attention.
• Efficient communication: Through motion and audio unique to videos, information can be conveyed more intuitively.
• Improved user experience: Displaying videos in a slider format provides users with a smooth visual experience.

Implementation Method

Below, we will explain step by step how to display MP4 files and YouTube videos in a slider using slick.js.

Writing CSS

Load the CDN slick.css and slick-theme.css files.
This includes CSS for the slide area (.slider) and dot indicators (.slick-dots), etc.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
<style>
body {
  margin: 0;
  padding: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
.slider{
  margin: 0;
  padding: 0;
  width: 100%;
  opacity: 0;
  transition: 3s;
}
.slick-initialized{
  opacity: 1
}
.slider img,
.slider video,
.sliderBox iframe{
  width: 100%;
  height: auto;
}
.slick-slide li{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.slick-slide iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slick-dots{
  bottom: 30px;
}
.slick-dots li button{
  width: 40px;
  height: 40px;
}
.slick-dots li button:before {
  line-height: 40px;
  width: 40px;
  height: 40px;
  opacity: 1;
  color: #ffffff;
  font-size: 16px;
}
.slick-dots li.slick-active button:before {
  opacity: 1;
  color: #000000;
}
</style>

Setting Up the HTML Structure

Prepare the HTML structure to display the slider.
Place MP4 files and YouTube iframes in a list format.
We prepared the video (tree.mp4) and the YouTube output area (id=”youtube”) for sliding display.

<h1>Display MP4 and YouTube Videos in a Slider Using slick.js</h1>

<ul class="slider">
  <li>
    <video autoplay loop muted poster="https://dad-union.com/demo/js/20230209-covervid/tree.jpg">
      <source src="https://dad-union.com/demo/js/20230209-covervid/tree.mp4" type="video/mp4">
    </video>
  </li>
  <li><div id="youtube"></div></li>
</ul>

Writing JavaScript to Display MP4 and YouTube Videos in a Slider Using slick.js

To autoplay YouTube videos inside the slider, use the YouTube IFrame Player API.
First, load jquery-2.1.4.min.js and slick.js files. Also, load the YouTube video API “https://www.youtube.com/iframe_api” as a script tag.
Write $(‘slider area’).slick({options}), and function onYouTubeIframeAPIReady() {output area, {YouTube video display options}}).
In the YouTube video display options, set the video ID, controller, title display, etc.

<script src="jquery-2.1.4.min.js"></script>
<script src="slick.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
//slick
$('.slider').slick({
    autoplay:true,
    autoplaySpeed:5000,
    dots:true,
    lazyLoad:"progressive", // Lazy load for images
    arrows:false,
    pauseOnHover:false
});

//YouTube
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'youtube', // Target element id
{
    videoId: 'P7Od94ikeoI', // YouTube video ID
    playerVars: {
        height: '100%',
        width: '100%',
        loop: 1,
        playlist: 'P7Od94ikeoI',
        controls: 0,// No controller
        autoplay: 1,
        showinfo: 0,// Hide video title
        rel: 0,// Related videos control
        iv_load_policy: 3,// Video annotations
        start: 30 // Start seconds
    },
    events: {
        'onReady': onPlayerReady
    }
}
);
}

//Ready
function onPlayerReady(event) {
  event.target.playVideo();
  event.target.mute();
}
</script>

Demo Page: Display MP4 and YouTube Videos in a Slider Using slick.js

If you would like to check the actual operation, please see this demo page.

Demo page to display MP4 and YouTube videos in a slider using slick.js

Reference Site

Smartphone OK! How to Use YouTube and Other Autoplay Videos in a Slider (slick.js)

Conclusion

By using slick.js, you can create attractive web content that makes use of videos.
We hope this article will serve as a helpful reference for your websites and projects.
Let’s continue to explore creative expression methods utilizing technology!

　
※If you reuse this, please do so at your own risk.
Do not reuse the Google Analytics tag inside the head tag of the demo page.