How To Have Multiple Videos Autoplay On Product Page

[JKIRK]

Hi,

I want to be able to have 2 videos autoplay on a product page, at the moment one autoplays, and when the other loads in stops playing and autoplays the other.

Here is the code and example: https://us.apm.mc/products/baby-mood-yummy-bear-ring-silver-a21444xbz

--------------------------------------------------------------------------------------------------------------------
    PRODUCT GALLERY
    --------------------------------------------------------------------------------------------------------------------
    {%- endcomment -%}

    {%- assign initial_media_id = product.featured_media.id -%}
    {%- assign initial_media_index = 0 -%}
    {%- assign media_count = 0 -%}

    {%- capture slideshow_media -%}
      {%- for media in product.media -%}
        {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
          {%- continue -%}
        {%- endif -%}
        
        {%- if product.selected_variant and media.id == product.selected_variant.featured_media.id -%}
          {%- assign initial_media_index = media_count -%}
          {%- assign initial_media_id = media.id -%}
        {%- endif -%}

        {%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,700,800,900,1000,1200,1400,1600', image: media -%}{%- endcapture -%}
        {%- case media.media_type -%}
          {%- when 'image' -%}
            
              

                {% assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

                
                

                
              

            

          {%- when 'external_video' -%}
            
              

                

                  {{- media | external_video_tag: image_size: '1024x' -}}
                

              

            

          {%- when 'video' -%}
            
              

                

                {% if media_count > 1 -%}
                  
                  {{- media | video_tag: image_size: '1024x', controls: true, autoplay: true -}}
                  
                  {% else %}
                  
                    {{- media | video_tag: image_size: '1024x', controls: true -}}
                  
                  {% endif %}
                

              

            

          {%- when 'model' -%}
            
              

                

                  {{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}
                

              

            

        {%- endcase -%}

        {%- assign media_count = media_count | plus: 1 -%}
      {%- endfor -%}
    {%- endcapture -%}

    {%- if product.media.size > 0 -%}
      
        

        {%- if action_list_items != blank -%}
          

            {{ action_list_items }}
          

        {%- endif -%}

        {%- capture slideshow_nav -%}
          {%- if media_count > 1 -%}
            {%- if section.settings.show_thumbnails -%}
              
                

                  {%- for media in product.media -%}
                    {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
                      {%- continue -%}
                    {%- endif -%}

                    {%- capture nav_item_badge -%}
                      {%- case media.media_type -%}
                        {%- when 'model' -%}
                          {% render 'icon', icon: 'media-model-badge' %}

                        {%- when 'video' or 'external_video' -%}
                          {% render 'icon', icon: 'media-video-badge' %}
                      {%- endcase -%}
                    {%- endcapture -%}

                    {%- if section.settings.stack_images -%}
                      
                        
                        {{- nav_item_badge -}}
                      
                    {%- else -%}
                      
                        
                        {{- nav_item_badge -}}
                      
                    {%- endif -%}
                  {%- endfor -%}
                

              

            {%- endif -%}

            {%- if section.settings.stack_images -%}
              
                

                  {%- for media in product.media -%}
                    {%- if media.alt == 'featured' or media.alt == 'featured mobile' -%}
                      {%- continue -%}
                    {%- endif -%}

                    
                  {%- endfor -%}
                

              

            {%- endif -%}
          {%- endif -%}
        {%- endcapture -%}

        {%- if section.settings.stack_images -%}
          {{- slideshow_nav -}}
        {%- endif -%}

        {%- capture flickity_options -%}
        {
          "prevNextButtons": false,
          "pageDots": false,
          "adaptiveHeight": true,
          "watchCSS": true,
          "dragThreshold": 8,
          "initialIndex": {{ initial_media_index }},
          "arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
        }
        {%- endcapture -%}

        
          {{ slideshow_media }}
        

        {%- comment -%}Add the "view in your space" button, which allows to show the product in customer's environment (if the device supports it){%- endcomment -%}
        {%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}

        {%- if first_3d_model -%}
          
        {%- endif -%}

        {%- if media_count > 1 -%}
          {%- comment -%}
            IMPLEMENTATION NOTE: The reason we create ourselves our own UI instead of relying of the built-in feature of Flickity is that,
            since the media API, Shopify requires to add arrows next to the dot. Unfortunately this layout is not
            achievable easily using Flickity options only, so we have to run our own
          {%- endcomment -%}

          

            

            

              {%- for i in (1..media_count) -%}
                
              {%- endfor -%}
            

            
          

        {%- endif -%}

        {%- unless section.settings.stack_images -%}
          {{- slideshow_nav -}}
        {%- endunless -%}
      

    {%- endif -%}

    {%- capture product_aside -%}
      {%- comment -%}

[EcomGraduates]

Hellio there

It looks like you want to have two videos autoplay on a Shopify product page. Currently, only one video is autoplaying and the other stops when it loads.

To achieve this, you will need to modify the code in the “PRODUCT GALLERY” section of your theme’s code. Specifically, you will need to modify the “video” media type section of the code.

To have two videos autoplay, you can modify this code as follows:

{%- when 'video' -%}
  
    

      

        {{- media | video_tag: image_size: '1024x', controls: true, autoplay: true -}}
      

    

  

  
    

      

        {{- media | video_tag: image_size: '1024x', controls: true, autoplay: true -}}
      

    

  

This code creates a second video tag that also has the “autoplay” attribute set to “true”. This should allow both videos to autoplay simultaneously on the product page.

[JKIRK]

Hi @EcomGraduates ,

I tried the code and it duplicates the video, see the image below

Thanks!