Video section

{% schema %}
{
  "name": "Video Carousel Section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Star-Studded Reviews"
    },
    {
      "type": "image_picker",
      "id": "star_image",
      "label": "5 Star Image"
    }
  ],
  "blocks": [
    {
      "type": "video",
      "name": "Video",
      "settings": [
        {
          "type": "url",
          "id": "video_url",
          "label": "Video URL"
        },
        {
          "type": "image_picker",
          "id": "thumbnail_image",
          "label": "Thumbnail Image"
        },
        {
          "type": "text",
          "id": "username",
          "label": "Username"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Video Carousel Section",
      "category": "Custom"
    }
  ]
}
{% endschema %}

<div class="video-carousel-section">
  <div class="video-carousel-section__header">
    <img src="{{ section.settings.star_image | img_url: 'master' }}" alt="5 Star Rating" class="video-carousel-section__stars">
    <h2 class="video-carousel-section__title">{{ section.settings.title }}</h2>
  </div>
  <div class="video-carousel">
    {% for block in section.blocks %}
      <div class="video-carousel__slide">
        <div class="video-container">
          <video width="240" height="430" poster="{{ block.settings.thumbnail_image | img_url: 'master' }}">
            <source src="{{ block.settings.video_url }}" type="video/mp4">
            Your browser does not support the video tag.
          </video>
          <button class="play-button" aria-label="Play video">
            <i class="bx bx-play"></i>
          </button>
        </div>
        <div class="video-carousel__info">
          <img src="{{ block.settings.thumbnail_image | img_url: 'thumb' }}" alt="{{ block.settings.username }}">
          <p>@{{ block.settings.username }}</p>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

<style>
.video-carousel-section {
  text-align: center;
  padding: 20px;
  background-color: rgba(238, 246, 251, 1);
}

.video-carousel-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-carousel-section__stars {
  width: 100px;
  margin-bottom: 10px;
}

.video-carousel-section__title {
  font-size: 2em;
  color: #2C72A0;
}

.video-carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  gap: 10px;
}

.video-carousel__slide {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 10px; */
}

.video-container {
  position: relative;
  width: 240px;
  height: 430px;
}

.video-container video {
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0;
  object-fit: cover;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.play-button i {
  font-size: 38px;
  color: #2C72A0;
  padding-left: 3px;
}

.video-carousel__info {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 240px;
  height: 78px;
  background-color: white;
  border-radius: 0 0 20px 20px;
  padding-left: 20px;
  gap: 10px;
}

.video-carousel__info img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.video-carousel__info p {
  color: #2C72A0;
}

@media (min-width: 768px) {
  .video-carousel {
    justify-content: center;
    overflow: hidden;
  }

  .video-carousel-section {
    padding: 70px;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const playButtons = document.querySelectorAll('.play-button');

  playButtons.forEach(button => {
    button.addEventListener('click', function () {
      const video = this.previousElementSibling;

      if (video.paused) {
        video.play();
        this.style.display = 'none';
      } else {
        video.pause();
        this.style.display = 'flex';
      }

      video.addEventListener('pause', () => {
        this.style.display = 'flex';
      });

      video.addEventListener('play', () => {
        this.style.display = 'none';
      });
    });
  });
});
</script>