Custom slider with video background.

_slider.liquid

<section class="slider-first-screen">
  <div class="slider">
    {% if settings.data.slide_1.image_1_1250x710 != "" or settings.data.slide_1.video_1 != "" %}
      <div>
        <div class="slider-first-screen__shadow--top"></div>
        {% if settings.data.slide_1.video_1 != "" %}
          <video class="slider-first-screen__video" loop autoplay>
            <source src="{{settings.data.slide_1.video_1}}" type="video/mp4">
          </video>
        {% endif %}
        <img src="{{ settings.data.slide_1.image_1_1250x710 }}" class="slider-bg" alt="">
        <div class="slider-content">
          <div class="container">
            <div class="col-sm-5">
              <h1 class="slider-title">{{ settings.data.slide_1.title_1 }}</h1>
              <div class="slider-description">
                {{ settings.data.slide_1.description_1 }}
              </div>
              <a class="slider-link" href="{{ settings.data.slide_1.link_1 }}"><i class="fa fa-play"></i>{{ settings.data.slide_1.link_1_text }}</a>
            </div>
          </div>
        </div>
        <div class="slider-first-screen__shadow--bottom"></div>
      </div>
    {% endif %}
    {% if settings.data.slide_2.image_2_1250x710 != "" or settings.data.slide_2.video_2 != "" %}
      <div>
        <div class="slider-first-screen__shadow--top"></div>
        {% if settings.data.slide_2.video_2 != "" %}
          <video class="slider-first-screen__video" loop autoplay>
            <source src="{{settings.data.slide_2.video_2}}" type="video/mp4">
          </video>
        {% endif %}
        <img src="{{ settings.data.slide_2.image_2_1250x710 }}" class="slider-bg" alt="">
        <div class="slider-content">
          <div class="container">
            <div class="col-sm-5">
              <h1 class="slider-title">{{ settings.data.slide_2.title_2 }}</h1>
              <div class="slider-description">
                {{ settings.data.slide_2.description_2 }}
              </div>
              <a class="slider-link" href="{{ settings.data.slide_2.link_2 }}"><i class="fa fa-play"></i>{{ settings.data.slide_2.link_2_text }}</a>
            </div>
          </div>
        </div>
        <div class="slider-first-screen__shadow--bottom"></div>
      </div>
    {% endif %}
    {% if settings.data.slide_3.image_3_1250x710 != "" or settings.data.slide_3.video_3 != "" %}
      <div>
        <div class="slider-first-screen__shadow--top"></div>
        {% if settings.data.slide_3.video_3 != "" %}
          <video class="slider-first-screen__video" loop autoplay>
            <source src="{{settings.data.slide_3.video_3}}" type="video/mp4">
          </video>
        {% endif %}
        <img src="{{ settings.data.slide_3.image_3_1250x710 }}" class="slider-bg" alt="">
        <div class="slider-content">
          <div class="container">
            <div class="col-sm-5">
              <h1 class="slider-title">{{ settings.data.slide_3.title_3 }}</h1>
              <div class="slider-description">
                {{ settings.data.slide_3.description_3 }}
              </div>
              <a class="slider-link" href="{{ settings.data.slide_3.link_3 }}"><i class="fa fa-play"></i>{{ settings.data.slide_3.link_3_text }}</a>
            </div>
          </div>
        </div>
        <div class="slider-first-screen__shadow--bottom"></div>
      </div>
    {% endif %}
    {% if settings.data.slide_4.image_4_1250x710 != "" or settings.data.slide_4.video_4 != "" %}
      <div>
        <div class="slider-first-screen__shadow--top"></div>
        {% if settings.data.slide_4.video_4 != "" %}
          <video class="slider-first-screen__video" loop autoplay>
            <source src="{{settings.data.slide_4.video_4}}" type="video/mp4">
          </video>
        {% endif %}
        <img src="{{ settings.data.slide_4.image_4_1250x710 }}" class="slider-bg" alt="">
        <div class="slider-content">
          <div class="container">
            <div class="col-sm-5">
              <h1 class="slider-title">{{ settings.data.slide_4.title_4 }}</h1>
              <div class="slider-description">
                {{ settings.data.slide_4.description_4 }}
              </div>
              <a class="slider-link" href="{{ settings.data.slide_4.link_4 }}"><i class="fa fa-play"></i>{{ settings.data.slide_4.link_4_text }}</a>
            </div>
          </div>
        </div>
        <div class="slider-first-screen__shadow--bottom"></div>
      </div>
    {% endif %}
    {% if settings.data.slide_5.image_5_1250x710 != "" or settings.data.slide_5.video_5 != "" %}
      <div>
        <div class="slider-first-screen__shadow--top"></div>
        {% if settings.data.slide_5.video_5 != "" %}
          <video class="slider-first-screen__video" loop autoplay>
            <source src="{{settings.data.slide_5.video_5}}" type="video/mp4">
          </video>
        {% endif %}
        <img src="{{ settings.data.slide_5.image_5_1250x710 }}" class="slider-bg" alt="">
        <div class="slider-content">
          <div class="container">
            <div class="col-sm-5">
              <h1 class="slider-title">{{ settings.data.slide_5.title_5 }}</h1>
              <div class="slider-description">
                {{ settings.data.slide_5.description_5 }}
              </div>
              <a class="slider-link" href="{{ settings.data.slide_5.link_5 }}"><i class="fa fa-play"></i>{{ settings.data.slide_5.link_5_text }}</a>
            </div>
          </div>
        </div>
        <div class="slider-first-screen__shadow--bottom"></div>
      </div>
    {% endif %}
  </div>
</section>

main.js

var video = $('.slider-first-screen__video')[0];
$('.slider-first-screen__video').each(function(e){
	video = $('.slider-first-screen__video')[e];
  video.addEventListener( "canplay", function() {
    $('.slider-first-screen__video')[e].play();
  });
});
//First screen slider init
  $('.slider').slick({
    prevArrow: '<button type=\'button\' class=\'slick-prev fa fa-chevron-left\'>Previous</button>',
    nextArrow: '<button type=\'button\' class=\'slick-next fa fa-chevron-right\'>Previous</button>',
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: true,
    dots: false,
  });
  $('.slider').ready(function () {
    $('.slider-first-screen').css('opacity','1');
  })

settings.json

  "slide_1": {
    "image_1_1250x710": "/assets/images/1/sample-background.jpg",
    "title_1": "Title First Slide",
    "description_1": "Description First Slide",
    "link_1": "",
    "link_1_text": "Link First Slide",
    "video_1": ""
  },
  "slide_2": {
      "image_2_1250x710": "/assets/images/1/sample-background.jpg",
      "title_2": "Title Second Slide",
      "description_2": "Description Second Slide",
      "link_2": "",
      "link_2_text": "Link Second Slide",
      "video_2": ""
  },
  "slide_3": {
      "image_3_1250x710": "/assets/images/1/sample-background.jpg",
      "title_3": "Title Third Slide",
      "description_3": "Description Third Slide",
      "link_3": "",
      "link_3_text": "Link Third Slide",
      "video_3": ""
  },
  "slide_4": {
      "image_4_1250x710": "/assets/images/1/sample-background.jpg",
      "title_4": "Title Fourth Slide",
      "description_4": "Description Fourth Slide",
      "link_4": "",
      "link_4_text": "Link Fourth Slide",
      "video_4": ""
  },
  "slide_5": {
      "image_5_1250x710": "/assets/images/1/sample-background.jpg",
      "title_5": "Title Fifth Slide",
      "description_5": "Description Fifth Slide",
      "link_5": "/programs/the-hour-with-alex-dawson",
      "link_5_text": "Link Fifth Slide",
      "video_5": ""
  },

styles.css

/* -------------------- SLIDER FIRST SCREEN -------------------- */
  .slider-first-screen {
    overflow: hidden;
    position: relative;
    max-height: 600px;
    opacity: 0;
    transition: opacity .2s ease-in;
    margin-top: -90px;
  }
  .slider-first-screen__shadow--bottom {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
    background: -moz-linear-gradient(top, rgba(20,20,20,1) 10%, rgba(20,20,20,0.5) 83%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(20,20,20,1) 10%,rgba(20,20,20,0.5) 83%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(20,20,20,1) 10%,rgba(20,20,20,0.5) 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    transform: rotate(180deg);
  }
  .slider-first-screen__shadow--top {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
    background: -moz-linear-gradient(top, rgba(20,20,20,0.95) 0%, rgba(20,20,20,0.5) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(20,20,20,0.95) 0%,rgba(20,20,20,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(20,20,20,0.95) 0%,rgba(20,20,20,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    z-index: 1;
  }
  .slider-first-screen .slick-slide {
    max-height: 600px;
    min-height: 545px;
  }
  .slider-bg {
    width: 100%;
  }
  .slider-content {
    position: absolute;
    top: 37%;
    z-index: 2;
    width: 100%;
  }
  .slider-title {
    font-size: 20px;
    color: #ddd;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    font-weight: bold;
    text-transform: uppercase;
    font-family: '{{settings.data.fonts.name_headers_font}}', sans-serif;
  }
  .slider-description {
    color: #ddd;
    font-weight: 300;
    font-size: 14px;
    line-height: 25px;
    margin: 10px auto;
    max-width: 500px;
    margin-left: 0;
  }
  .slider-link {
    display: inline-block;
    border: 1px solid {{ settings.data.colors.text_color }};
    border-radius: 24px/22px 22px 22px 22px;
    padding: 7px 20px;
    text-align: center;
    color: #c1314e;
    transition: all .2s ease-in;
    outline: none;
    margin-top: 15px;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.23);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.23);
    opacity: 0.8;
  }
  .slider-link i {
    margin-right: 15px;
  }
  .slider-link:hover, .slider-link:focus {
    background: rgba(255,255,255,0.1);
    border: 1px solid {{ settings.data.colors.text_color }};
    color: {{ settings.data.colors.text_color }};
    opacity: 1;
  }
  .slick-dots {
    display: block;
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: .55;
  }
  .slick-dots li {
    position: relative;
    display: inline-block;
    margin: 0 10px;
    width: 12px;
    height: 12px;
    cursor: pointer;
    color: transparent;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0);
    transition: box-shadow .3s ease;
  }
  .slick-dots li button {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    border-radius: 50%;
    background-color: {{ settings.data.colors.text_color }};
    background-color: rgba(255,255,255,1);
    text-indent: -999em;
    cursor: pointer;
    position: absolute;
    transition: background-color .3s ease,-webkit-transform .3s ease;
    transition: background-color .3s ease,transform .3s ease;
    transition: background-color .3s ease,transform .3s ease,-webkit-transform .3s ease;
    padding: 1px;
  }
  .slick-dots li.slick-active {
      cursor: default;
      box-shadow: 0 0 0 2px {{ settings.data.colors.text_color }};
  }
  .slick-dots li.slick-active button {
    -webkit-transform: scale(.4);
    transform: scale(.4);
    background-color: {{ settings.data.colors.text_color }};
  }
  @media only screen and (max-width: 767px) {
      .slider-first-screen {
        margin-top: 0px;
      }
    .slider-content {
      bottom:20px;
      top: auto;
    }
    .slider-title {
      font-size: 17px;
    }
    .slider-link {
      display: block;
    }
    .slider-description {
      line-height: 20px;
      margin: 5px auto;
    }
    .slick-dots {
      bottom: 5px;
    }
  }
/* -------------------- SLIDER FIRST SCREEN -------------------- */

.slider-first-screen__video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
}
@media only screen and (max-width: 767px) {
  .slider-first-screen__video {
    display: none;
  }
}
.bottom-banner img {
	width: 100%;
}

.slick-prev:before, .slick-next:before {
	color: #c1314e !important;
}
.slider-first-screen__shadow--top {
	display: none;
}
.slider-first-screen__shadow--bottom {
	display: none;
}