Coding Product Video on last product photo

Shopify Partner
1 0 0

Hey all,

We have code that's meant to have a video play on our last "imported photo"

  • A developer we hired put in two different video options and we don't have the means to get back in contact with them. I played around with getting youtube videos embed, but it didn't work. Not sure if it's due to the code:

{% assign src=image.alt | split: 'src="' %}
{% assign src=src[1] | split: '"' | first %}

*Which is shown in the code attached below

 

I was able to get the second option to work, since the code for it was saved in another theme so we can pick and choose. But since I did that, now ALL of the products disappear when it comes to the last photo if it doesn't have a video tagged to it.

{% for image in product.images %}                                   
                                  
   {% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}
   {% assign src=image.alt | split: 'src="' %}
   {% assign src=src[1] | split: '"' | first %}

   {% if src contains '?' %}
   {% assign src=src | append: '&autoplay=1' %}
   {% else %}
   {% assign src=src | append: '?autoplay=1' %}
   {% endif %}

     <div class="product-single__photo__item {% if image.alt contains 'vimeo' %}vimeo{% else %}youtube{% endif %}"  data-slide-id="{{ forloop.index0 }}" id="elevate-div">
     <div>
       <a href="{{ src }}" class="fancybox fancybox.iframe" data-fancybox-group="{{ product.id }}" title="{{ product.title | escape }}">
         {{ image.alt }}
         </a>
         </div>
        </div>
       {% else %}                                   
                                   
<div class="product-single__photo__item" data-variant-id="{% for variant in image.variants %}{{ variant.id }}{% endfor %}" data-slide-id="{{ forloop.index0 }}" id="elevate-div"> {% if section.settings.enable_zoom %} <a href="{{ image.src | img_url: '2048x2048' }}" class="product-single__photo-zoom js-product-zoom"> {% endif %} {%- assign img_url = image.src | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<!-- Product Image --> {% if forloop.last == true %} {% for tag in product.tags %} {% if tag == "has_product_video" %} {% for tag in product.tags %} {% if tag contains "product_video_link" %} <video id="product_video" class="product-single__photo__img lazyload js" alt="{{product.title}} product video" autoplay loop muted> <source src="{{ tag | remove: "product_video_link"}}" type="video/mp4"> </video> {% endif %} {% endfor %} {% endif %} {% endfor %} {% else %} <img class="product-single__photo__img lazyload js" src="{{ image.src | img_url: '300x' }}" data-src="{{ img_url }}" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-sizes="auto" data-ratio="{{ image.aspect_ratio }}" data-zoom-image="{{ image.src | img_url: '600x' }}" alt="{{ image.alt | escape }}" alt="{{product.title}}" > {% endif %} <!-- Product Image End -->

Is anyone aware why this is happening? I tried fixing any code I know how to fix, and it didn't work so I'm a little bit confused and hoping someone can spot something I may have missed.

If you need an example, this is how it should look with a video, but this is how it is if we don't attach a tag for the last photo (items that may not have videos)

 

0 Likes