Multi-column videos autoplay simultaneously

[NVDP]

I created a multi-column section to play multiple vertical videos on the same page. They problem is it now autoplays both videos at the same time when they are loaded. Below you'll find the code. with the Video block settings. When I remove the autoplay after the <video-media the videos won't show anymore, only when I click on the white page they reappear again. Who knows what to do here? You can visit an examp

                <div class="multi-column__item multi-column__item-{{block.id}} justify-{{ section.settings.text_alignment }} snap-start" style="--multi-column-item-column-count: span {{ 12.0 | divided_by: block.settings.column_size | round }}" {{ block.shopify_attributes }}>
                  {%- if block.settings.video != blank -%}
                    <video-media autoplay style="--aspect-ratio: {{ block.settings.video.aspect_ratio }}">
                      {{ block.settings.video | video_tag: playsinline: true, autoplay: false, controls: true, muted: false, loop: true, preload: 'metadata', class: 'rounded' }}
                    </video-media>
                  {%- elsif block.settings.image != blank -%}
                    {%- capture sizes -%}(max-width: 699px) calc(73vw - 40px), (max-width: 999px) calc(38vw - 64px), calc(min({{ settings.page_width }}px, 100vw) / {{ block.settings.column_size }}){%- endcapture -%}
                    {{- block.settings.image | image_url: width: block.settings.image.width | image_tag: loading: 'lazy', sizes: sizes, widths: '300,400,500,600,800,1000,1200,1400,1600,1800', class: 'rounded' -}}
                  {%- endif -%}
  
                  {%- if block.settings.title != blank or block.settings.content != blank or block.settings.link_text != blank -%}
                    <div class="v-stack gap-4 text-{{ section.settings.text_alignment }}">
                      {%- if block.settings.title != blank -%}
                        <p class="{{ block.settings.heading_tag }}">{{ block.settings.title | escape }}</p>
                      {%- endif -%}
  
                      {%- if block.settings.content != blank or block.settings.link_text != blank -%}
                        <div class="prose">
                          {{- block.settings.content -}}
  
                          {%- if block.settings.link_text != blank -%}
                            <div>
                              {%- if block.settings.link_style == 'link' -%}
                                <a href="{{ block.settings.link_url }}" class="link">{{ block.settings.link_text | escape }}</a>
                              {%- else -%}
                                {%- render 'button', href: block.settings.link_url, content: block.settings.link_text, size: 'lg' -%}
                              {%- endif -%}
                            </div>