Переделка Js анимации

function init_video_carousel() { 
  var cont = $('.js-video_background'); 
  var playlist = $('.js-video_background-playlist'); 
  var playlistItems = $('li', playlist); 
  var player = $('.js-video_background-player'); 
  var video = player.get(0); 
 
  if (!cont.length) { 
    return; 
  } 
 
  play_video(0); 
 
  // Включаем следующее видео при окончании ролика 
  video.addEventListener('ended', function() { 
    play_video((player.data('currentVideo')) + 1); 
  }); 
 
  function play_video(index) { 
    var min = 0, 
      max = playlistItems.length; 
 
    if (index < min) { 
      index = max; 
    } else if (index >= max) { 
      index = min; 
    } 
 
    var active = playlistItems.eq(index); 
    var activeClass = 'active'; 
 
    playlistItems.removeClass(activeClass); 
    active.addClass(activeClass); 
 
    player.data('currentVideo', index); 
 
    player.fadeOut('fast', function() { 
      if (active.data('src')) { 
        video.src = active.data('src'); 
      } 
 
      if (active.data('poster')) { 
        video.poster = active.data('poster'); 
      } 
      video.load(); 
      $('.mainpage__top').addClass('changing'); 
 
      $('.mainpage__top__caption,.mainpage__top__line,.mainpage__top__description').fadeOut('fast', function() { 
        $('.mainpage__top__caption').text(active.data('caption')); 
        $('.mainpage__top--line-1').text(active.data('line-1')); 
        $('.mainpage__top--line-2').text(active.data('line-2')); 
        $('.mainpage__top__description--line-1').text(active.data('description-line-1')); 
        $('.mainpage__top__description--line-2').text(active.data('description-line-2')); 
        $(this).fadeIn('slow'); 
      }); 
      player.fadeIn('slow', function() { 
 
        $('.mainpage__top').removeClass('changing'); 
        video.play(); 
      }); 
    }); 
 
 
  } 
}

.video_background { 
  background: url('/wp-content/uploads/2017/07/header-bacground_opt.jpg') no-repeat center center fixed; 
  background-size: cover; 
  height: 576px; 
  width: 100%; 
  position: absolute; 
  z-index: -1; 
  overflow: hidden; 
  background-size: cover; 
} 
 
.video_background video { 
  max-height: 576px; 
  margin: auto; 
  display: block; 
} 
 
.mainpage__top { 
  font-size: 10px; 
} 
 
@media (min-width: 1440px) { 
  .video_background video { 
    max-height: none; 
    width: 100%; 
    height: auto; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
  } 
} 
 
@media (min-width: 720px) and (max-width: 1200px) { 
  .mainpage__top { 
    font-size: 7px; 
  } 
  .mainpage__top__lines .mainpage__top--line-1 { 
    width: 600px !important; 
    margin-bottom: 0px !important; 
  } 
} 
 
@media (min-width: 500px) and (max-width: 720px) { 
  .mainpage__top { 
    font-size: 5px; 
  } 
  .video_background { 
    display: none; 
  } 
  .mainpage__top--line-1 { 
    width: 450px !important; 
    margin-bottom: 0px !important; 
  } 
} 
 
@media (max-width: 500px) { 
  .mainpage__top { 
    font-size: 4px; 
  } 
  .mainpage__top__line { 
    font-size: 6.5em !important; 
    margin-bottom: 0px !important; 
    padding: 0px 15px !important; 
  } 
  .mainpage__top__caption { 
    margin-bottom: 20px !important; 
  } 
  .mainpage__top--line-1 { 
    width: 270px; 
  } 
  .video_background { 
    display: none; 
  } 
} 
 
.mainpage__top__line { 
  font-weight: 300 !important; 
} 
 
 
} 
.mainpage__top__caption, 
.mainpage__top__line, 
.mainpage__top__description { 
  -webkit-transition: all 500ms; 
  -o-transition: all 500ms; 
  transition: all 500ms; 
  -webkit-transform: scale(1, 1); 
  -ms-transform: scale(1, 1); 
  -o-transform: scale(1, 1); 
  transform: scale(1, 1); 
  opacity: 1; 
} 
.changing .mainpage__top__caption, 
.changing .mainpage__top__line, 
.changing .mainpage__top__description { 
  -webkit-transform: scale(0, 1); 
  -ms-transform: scale(0, 1); 
  -o-transform: scale(0, 1); 
  transform: scale(0, 1); 
  opacity: .5; 
} 
.mainpage__top__caption::after, 
.mainpage__top__line::after { 
  content: "\A"; 
  white-space: pre; 
} 
.mainpage__top__caption { 
  font-size: 3.6em; 
  background-color: #f0ad4e; 
  color: #fff; 
  text-transform: uppercase; 
  display: inline-block; 
  line-height: 1.6; 
  margin-top: 0; 
  padding: 8px 32px; 
  margin-top: 65px; 
  margin-bottom: 40px; 
  line-height: 1.04; 
  font-weight: 100; 
} 
.mainpage__top__lines { 
  position: relative; 
  margin-bottom: 10px; 
} 
.mainpage__top__lines::before { 
  content: ''; 
  position: absolute; 
  width: 1.2em; 
  height: 100%; 
  left: 0; 
  top: 0; 
  background-color: #fff; 
} 
.mainpage__top__line { 
  color: #fff; 
  font-size: 7em; 
  line-height: 1; 
  display: block; 
  padding: 0px 32px; 
  font-weight: 600; 
  position: relative; 
  margin-bottom: 10px; 
} 
.mainpage__top--line-1 { 
  margin-top: 0; 
} 
.mainpage__top--line-2 { 
  margin-bottom: 20px; 
} 
.mainpage__top__description { 
  font-size: 2.3em; 
  color: #fff; 
  padding: 8px 0; 
  line-height: 2; 
  margin-bottom: 34px; 
  text-transform: uppercase; 
} 
.mainpage__top { 
  font-size: 10px; 
  height: 500px; 
} 
@media (max-width: 767px) { 
  .mainpage__top { 
    font-size: 7px; 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="videobg_pict"> 
  <div class="video_background js-video_background"> 
    <video class="video_background-player js-video_background-player" playsinline autoplay muted id="videobg" style=""></video> 
    <ul class="js-video_background-playlist" style="display: none;"> 
      <li data-src="/wp-content/uploads/2017/07/header.mp4" data-caption="Разработка сайтов" data-line-1="Исправления ошибок" data-line-2="Все проверки через Validator" data-description-line-1="Работа со всеми странами." data-description-line-2="Общение на Украинском,Русском,Английском"></li> 
      <li data-src="/wp-content/uploads/2017/07/header.mp4" data-caption="Оптимизация сайтов под Wordpress" data-line-1="Скорость отклика" data-line-2="Проверка с PageSpeed Insights" data-description-line-1="Работа со всеми странами." data-description-line-2="Общение на Украинском,Русском,Английском"></li> 
    </ul> 
  </div> 
  <div class="container"> 
    <div class="mainpage__top"> 
      <div><span class="mainpage__top__caption"></span></div> 
      <div class="mainpage__top__lines"> 
        <div><span class="mainpage__top__line mainpage__top--line-1"></span></div> 
        <div><span class="mainpage__top__line mainpage__top--line-2"></span></div> 
      </div> 
      <div><span class="mainpage__top__description mainpage__top__description--line-1"></span></div> 
      <div><span class="mainpage__top__description mainpage__top__description--line-2"></span></div> 
    </div> 
  </div> 
</div>