I was trying to insert video via alt text for images on product page but still stuck. I'm using Grid Theme and did play around the the template. Here is sample of video I want to add via alt text. https://www.beardbrand.com/collections/utility-balm/products/tree-ranger-utility-beard-balm
I've tried on different free themes on shopify but still didn't work. This is the code where I tried to test on the current theme.
{% if image.alt contains 'youtube' %}
<iframe width="500px" height="500px" src="{{image.alt}}
autoplay=1&showinfo=0&controls=0&rel=0" frameborder="0" allowfullscreen>
</iframe>
{% else %}
<a href="{{ image.src | img_url: product_image_size, scale:
product_image_scale }}" class="text-link product-single__thumbnail
product-single__thumbnail--{{ section.id }}"
{% if enable_zoom %}data-zoom="{{ image.src | img_url:
product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img class="product-single__thumbnail-image" src="{{ image.src |
img_url: product_thumb_size, scale: product_image_scale }}" alt="{{
image.alt | escape }}">
</a>
{% endif %}
I also tried using this code below:
<div id="product-flexslider" class="flexslider product_gallery
product-{{product.id }}-gallery
{% if product-images == blank %}product_slider
{% endif %}
{% if settings.product_thumbs == false %}animated fadeInUp {% endif %}">
<ul class="slides">
{% for image in product.images %}
<li data-thumb="{{ image | product_img_url: '1024x1024' }}"
data-title="{% if image.alt contains 'youtube' or image.alt
contains 'vimeo' %}{{ product.title }}
{% else %}
{{ image.alt | escape }}{% endif %}">
{% 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="video-container {% if image.alt contains 'vimeo' %}
vimeo{% else %}
youtube{% endif %}">
<div>
<a href="{{ src }}" title="{{ product.title | escape }}">
{{ image.alt }}
</a>
</div>
</div>
{% else %}
<a href="{{ image | product_img_url: 'master' }}"
title="{{ image.alt | escape }}">
<img src="{{ image | product_img_url: '1024x1024' }}"
alt="{{ image.alt | escape }}"/>
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
Here is the liquid code for the start of product image.
<div class="product-images
{% if images_layout == 'masonry' %}
product-images-masonry
product-images-masonry-{{ product.images.size }}
{% endif %}"
{% if images_layout == 'masonry' and product.images.size > 1 %}
data-masonry-gallery
{% endif %}>
{% if images_layout == 'masonry' and product.images.size > 1 %}
<div class="product-image-masonry-sizer" data-masonry-image-sizer>
</div>
{% endif %}
{% if images_layout == 'slideshow' %}
<div class="product-main-image">
{% assign main_image = variant.image |
default: product.featured_image %}
{% assign main_image_alt = product.title %}
{% if main_image.alt != blank %}
{% assign main_image_alt = main_image.alt %}
{% endif %}
{% if main_image != blank %}
{% capture attr %}
data-image-id="{{ main_image.id }}"
data-product-main-image
{% endcapture %}
{%
include 'rimg',
img: main_image,
attr: 'data-product-main-image',
lazy: lazy,
size: '1400x',
attr: attr
%}
{% else %}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if enable_zoom %}
<div class="product-zoom"></div>
{% endif %}
</div>
{% if product.images.size > 1 %}
<div class="product-thumbnails-outer-wrapper">
{% if product.images.size > 4 %}
<span class="product-thumbnails-navigation-previous"></span>
{% endif %}
<div class="product-thumbnails-wrapper">
<div class="product-thumbnails
{% if product.images.size > 4 %}has-side-scroll{% endif %}">
{% for image in product.images %}
<div class="product-thumbnail
{% if mainImage == image %}active{% endif %}">
{% capture attr %}
data-image-id="{{ image.id }}"
{% endcapture %}
{%
include 'rimg',
img: image,
size: '115x',
attr: attr,
lazy: lazy
%}
</div>
{% endfor %}
</div>
</div>
{% if product.images.size > 4 %}
<span class="product-thumbnails-navigation-next"></span>
{% endif %}
</div>
{% endif %}
{% else %}
{%- for image in product.images -%}
{% assign use_large_image = false %}
{% if product.images.size == 2 %}
{% assign use_large_image = true %}
{% elsif forloop.first and use_masonry %}
{% assign use_large_image = true %}
{% endif %}
{% assign image_alt = product.title %}
{% if image.alt != blank %}
{% assign image_alt = image.alt %}
{% endif %}
<div class="product-image {% if use_large_image %}product-image-wide{% endif %}">
{%
include 'rimg',
img: image,
size: '575x',
lazy: lazy,
data-image-id: image.id
%}
</div>
{%- else -%}
<div class="product-image {% if use_large_image %}product-image-wide{% endif %}">
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endfor -%}
{% endif %}
