Как кастомизировать ютуб плеер?

Question

У меня есть слайдер. В каждом слайде существует ютуб видео, которое добавляется через html видежет. Мне нужно кастомизировать ютуб плеер. Изменив высоту плеера на мобильном устройстве, а так же реализовать переключение видео с помощью свайпа. Подскажите пожалуйста как можно это сделать?

пример кода:

$('.demo-slider').slick(
{
  dots: true
}
) ;

.demo-slider { 
  width: 860px;
  margin: 0 auto;
}

@media (max-width: 576px) {
        .demo-slider {
            width: 91%;
            margin-left: 0;
            padding: 20px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo-slider">
  <div class="demo-list-slider">
    <iframe width="860" height="484" src="https://www.youtube.com/embed/F8MN0o6RS9o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="demo-list-slider">
    <iframe width="860" height="484" src="https://www.youtube.com/embed/7JsOhtl_zG4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="demo-list-slider">
    <iframe width="860" height="484" src="https://www.youtube.com/embed/NLqU0pDY7XQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

БЛОГ НА HUSL

Как кастомизировать ютуб плеер?

Ответы (0 шт):