Video section like Youtube playlist (left large video, right video list)

helpers.php

<?php

function _get_youtube_video_thumbnail_url($video_id) {
	return "https://i.ytimg.com/vi/$video_id/hqdefault.jpg";
}

video-list.pcss

.video-list__row {
  margin-top: 1em;

  &:first-child {
    margin-top: 0;
  }
}

video-list.php

<?php
if (!empty($videos)) : ?>
	<div class="video-list js-video-list" <?php if(!empty($data_offset_number)) : ?> data-offset-number="<?php echo $data_offset_number; ?>" <?php endif; ?>>
		<?php foreach($videos as $video) : ?>
			<div class="video-list__row">
				<?php the_block('video-thumbnail', array(
					'video_id' => $video,
					'video_cat_id' => $video_cat_id,
					'posts_per_page' => !empty($posts_per_page) ? $posts_per_page : -1,
					'url' => _get_youtube_video_thumbnail_url($video),
          'data_video_modal' => $data_video_modal
				)); ?>
			</div>
		<?php endforeach; ?>
	</div>
<?php endif; ?>

video-section.pcss

.video-section__col {
  width: 100%;
  margin-top: 1em;

  &:first-child {
    margin-top: 0;
  }

  @media (--s) {
    margin-top: 0;
  }
}

.video-section__col--screen {
  @media (--s) {
    width: 66.85%;
  }
}

.video-section__col--thumbnails {
  @media (--s) {
    width: 33.15%;
  }
}

.video-section--4-columns {
  & .video-section__col--screen {
    @media (--s) {
      width: 75.4%;
    }
  }

  & .video-section__col--thumbnails {
    @media (--s) {
      width: 24.6%;
    }
  }
}

video-section.php

<?php
if (!empty($items)) :
  $video_ids = $items;
  $video_total = sizeof( $video_ids);
  $_class = 'video-section';
  $_class .= ' video-section--' . $video_total . '-columns';
  $_class .= !empty($class) ? ' ' . $class : '';
  ?>
  <section class="<?php echo $_class; ?>">
    <?php if (!empty($title) || !empty($description)) :
      the_block('section-header', array(
        'class' => 'align-c mb-1 video-section__header',
        'has_line' => true,
        'title' => $title,
        'description' => $description
      ));
    endif; ?>
    <div class="mt-1 video-section__main">
      <div class="container">
        <div class="rel video-section__wrapper">
          <div class="grid video-section__grid">
            <div class="grid__col video-section__col video-section__col--screen">
              <div class="video-section__inner">
                <div class="video-section__screen">
                  <?php the_block('video-thumbnail', array(
                    'video_id' => $video_ids[0],
                    'class' => 'video-thumbnail--large',
                    'video_cat_id' => $video_cat_id,
                    'posts_per_page' => 20,
                    'data_video_modal' => true,
                  )); ?>
                </div>
              </div>
            </div>
            <?php if (count($video_ids) > 1) : ?>
              <div class="grid__col video-section__col video-section__col--thumbnails ">
                <div class="video-section__inner">
                  <?php
                  unset($video_ids[0]);
                  $other_video_ids = array_values($video_ids);
                  the_block('video-list', array(
                    'videos' => $other_video_ids,
                    'video_cat_id' => $video_cat_id,
                    'posts_per_page' => 20,
                    'data_offset_number' => 1,
                    'data_video_modal' => true,
                  )); ?>
                </div>
              </div>
            <?php endif; ?>
          </div>
        </div>
      </div>
    </div>
    <?php if (!empty($button_text) && !empty($button_url)) : ?>
      <footer class="align-c mt-1 video-section__footer">
        <a class="button button--outline video-section__button" href="<?php echo esc_url($button_url); ?>">
          <span class="button__text"><?php echo $button_text; ?></span>
        </a>
      </footer>
    <?php endif; ?>
  </section>
<?php endif; ?>

video-thumbnail.pcss

.video-thumbnail {
  cursor: pointer;
  box-shadow: 0 1px 4px 1px var(--light);

  & .video-thumbnail__title {
    padding: 0.5em 1em;
    font-size: 0.75rem;
    background: var(--light-2);
  }

  &:hover {
    & .video-thumbnail__image-wrapper {
      &::after {
        @media (--m) {
          background-color: rgba(0, 0, 0, 0.25);
        }
      }
    }

    & h3 {
      color: var(--primary);
      transition: 0.5s ease;
    }
  }

  &.is-active {
    pointer-events: none;

    & .video-thumbnail__image-wrapper {
      &::after {
        background-color: rgba(0, 0, 0, 0.4);
      }
    }

    & .video-thumbnail__icon-wrapper {
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 50px 50px 0 0;
        border-color: var(--primary) transparent transparent transparent;
      }
    }

    & .video-thumbnail__icon-play {
      display: none;
    }

    & .video-thumbnail__icon-pause {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}

.video-thumbnail__image-wrapper {
  @mixin ratio 9/16;
  @mixin image-overlay 0.1;

  display: flex;
  pointer-events: none;
}

.video-thumbnail__image {
  @mixin abs-full;

  object-fit: cover;
  z-index: 1;
}

.video-thumbnail__icon-wrapper {
  @mixin abs-full;
  @mixin flex-center;

  z-index: 2;
}

.video-thumbnail__icon {
  @mixin flex-center;

  position: relative;

  & svg {
    position: relative;
    width: 28px;
    height: 28px;
    fill: var(--primary);
    z-index: 2;

    @media (--m) {
      width: 34px;
      height: 34px;
    }
  }
}

.video-thumbnail__icon-play,
.video-thumbnail__icon-pause {
  width: 40px;
  height: 40px;

  & svg {
    position: relative;
    width: 20px;
    height: 20px;
    fill: var(--white);
    z-index: 2;
  }
}

.video-thumbnail__icon-play {
  @mixin flex-center;
}

.video-thumbnail__icon-pause {
  display: none;
}

.video-thumbnail--large {
  & .video-thumbnail__icon {
    & svg {
      width: 80px;
      height: 80px;
    }
  }
}

video-thumbnail.php

<?php if (!empty($video_id)) : ?>
	<div class="video-thumbnail<?php if (!empty($class)) : echo ' ' . $class; endif; ?>"<?php if(!empty($posts_per_page)) : ?> data-posts-per-page="<?php echo $posts_per_page; ?>"<?php endif; ?> <?php if(!empty($video_cat_id)) : ?>data-video-cat-id="<?php echo $video_cat_id; ?>" <?php endif; ?> data-video-id="<?php echo $video_id; ?>" <?php if (isset($data_video_modal) && $data_video_modal) : ?>data-video-modal<?php endif; ?>>
		<picture class="video-thumbnail__image-wrapper">
			<img
			  loading="lazy"
			  class="no-click image__img video-thumbnail__image lazyload"
			  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
			  data-src="<?php echo _get_youtube_video_thumbnail_url($video_id); ?>"
			  alt=""
			  width="480"
			  height="360"
      >
			<div class="video-thumbnail__icon-wrapper">
				<div class="video-thumbnail__icon">
					<div class="video-thumbnail__icon-play">
						<?php codetot_svg('play', true); ?>
					</div>
					<div class="video-thumbnail__icon-pause">
						<?php codetot_svg('pause', true); ?>
					</div>
			  </div>
      </div>
		</picture>
    <?php if(!empty($title)) : ?>
    <div class="video-thumbnail__title">
      <h3><?php echo $title; ?></h3>
    </div>
    <?php endif; ?>
	</div>
<?php endif; ?>