Videos not displaying on product page media - mp4 and YouTube videos

jah23
New Member
1 0 0

Hello,

Whenever I add videos to the product page media list, the videos do not display on the product page. All the other images display. I have taken a look at the product-templates and the product-images.liquid and am stuck on why they are not displaying. I am including the code for reference.

product-template.liquid

{% include 'product-template',
  description_style: section.settings.description_style,
  image_position: section.settings.image_position,
  image_container_width: section.settings.image_size,
  section_id: product.id,
  social: section.settings.social_enable,
  thumbnail_position: section.settings.thumbnail_position,
  thumbnail_arrows: section.settings.thumbnail_arrows
%}

 

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "select",
        "id": "image_position",
        "label": "Images position",
        "default": "right",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      },
      {
        "type": "select",
        "id": "image_size",
        "label": "Image size",
        "default": "medium",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ]
      },
      {
        "type": "select",
        "id": "thumbnail_position",
        "label": "Thumbnail position",
        "default": "beside",
        "options": [
          {
            "value": "beside",
            "label": "Next to image"
          },
          {
            "value": "below",
            "label": "Below image"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "thumbnail_arrows",
        "label": "Show thumbnail arrows"
      },
      {
        "type": "select",
        "id": "description_style",
        "label": "Description position",
        "default": "default",
        "options": [
          {
            "value": "default",
            "label": "Next to images"
          },
          {
            "value": "full",
            "label": "Below images"
          }
        ]
      },
	  {
		"type": "richtext",
		"id": "cbd_text",
		"label": "CBD product text"
	  },
      {
        "type": "checkbox",
        "id": "social_enable",
        "label": "Enable social sharing",
        "default": true
      }
    ]
  }
{% endschema %}


 product-template.liquid (section)

{%- unless thumbnail_position -%}
  {%- assign thumbnail_position = 'beside' -%}
{%- endunless -%}

{%- unless description_style -%}
  {%- assign description_style = 'full' -%}
{%- endunless -%}

{%- assign product_img_structure = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div id="ProductSection-{{ section_id }}"
  class="product-section"
  data-section-id="{{ section_id }}"
  data-section-type="product-template"
  data-product-handle="{{ product.handle }}"
  data-product-url="{{ product.url | within: collection }}"
  data-aspect-ratio="{{ 100 | divided_by: product.featured_image.aspect_ratio }}"
  data-img-url="{{ product_img_structure }}"
  {% if settings.product_zoom_enable %}
    data-image-zoom="true"
  {% endif %}
  {% if settings.inventory_enable %}
    data-inventory="true"
  {% endif %}
  {% if settings.inventory_transfers_enable %}
    data-incoming-inventory="true"
  {% endif %}
  {% unless isModal %}
    data-enable-history-state="true"
  {% endunless %}
  {% if isModal %}
    data-lazyload-content="true"
  {% endif %}>

  {%- include 'product-template-variables' -%}

  <div class="page-content page-content--product">
    <div class="page-width">

      <div class="grid{% unless image_position == 'left' %} grid--product-images-right{% endunless %}">
        {%- if image_position == 'left' -%}
          <div class="grid__item {{ product_image_width }}">
           
            {% include 'product-images', section_id: section_id, isModal: isModal, thumbnail_position: thumbnail_position, thumbnail_arrows: thumbnail_arrows %}
          </div>
        {%- endif -%}

        <div class="grid__item {{ product_description_width }}">

          <div class="product-single__meta">
            {%- if settings.show_breadcrumbs and isModal != true -%}
              {%- include 'breadcrumbs' -%}
            {%- endif -%}

            {%- if settings.vendor_enable -%}
              <div class="product-single__vendor">
                {{ product.vendor }}
              </div>
            {%- endif -%}

            {%- if isModal -%}
              <p class="h2 product-single__title">
                {{ product.title }}
              </p>
            {% else %}
              <h1 class="h2 product-single__title">
                {{ product.title }}
              </h1>
            {%- endif -%}

            {%- if settings.enable_product_reviews and settings.reviews_layout == 'full' -%}
              {%- if isModal -%}
                {%- assign review_link = product.url | within: collection | append: '#Reviews-' | append: product.id -%}
              {% else %}
                {%- assign review_link = '#Reviews-' | append: product.id -%}
              {%- endif -%}
              <a href="{{ review_link }}" class="product-single__review-link">
                <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
              </a>
            <div class="yotpo bottomLine"
                 data-appkey="qbTMA0aQNVnWfuy0mdfy5rHsPrpxlrOycGfUOgre"
                 data-domain="{{shop.permanent_domain | escape }}"
                 data-product-id="{{ product.id }}"
                 data-product-models="{{ product.id }}"
                 data-name="{{ product.title | escape }}"
                 data-url="{{ shop.url }}{{ product.url }}"
                 data-image-url="{{ product.featured_image | product_img_url: 'large' |replace: '?', '%3F' | replace: '&','%26'}}"
                 data-description="{{ product.description | escape }}"
                 data-bread-crumbs="{% for tag in product.tags %}{{ tag | escape }};{% endfor %}">
            </div>
            {%- endif -%}

            {%- if settings.sku_enable -%}
              <p id="Sku-{{ section_id }}" class="product-single__sku">
                {%- if current_variant.sku -%}
                  {{ current_variant.sku }}
                {%- endif -%}
              </p>
            {%- endif -%}

            {%- assign hide_sale_price = true -%}
            {%- if product.compare_at_price_max > product.price -%}
              {%- if current_variant.compare_at_price > current_variant.price -%}
                {%- assign hide_sale_price = false -%}
              {%- endif -%}
              <span
                id="PriceA11y-{{ section_id }}"
                class="visually-hidden"
                aria-hidden="{{ hide_sale_price }}">
                  {{ 'products.general.regular_price' | t }}
              </span>
              <span class="product__price-wrap-{{ section_id }}{% if hide_sale_price %} hide{% endif %}">
                <span id="ComparePrice-{{ section_id }}" class="product__price product__price--compare">
                  {%- if current_variant.compare_at_price > current_variant.price -%}
                    {{ current_variant.compare_at_price | money }}
                  {%- endif -%}
                </span>
              </span>
              <span id="ComparePriceA11y-{{ section_id }}" class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
            {% else %}
              <span id="PriceA11y-{{ section_id }}" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            {%- endif -%}

            <span id="ProductPrice-{{ section_id }}"
              class="product__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}">
              {{ current_variant.price | money }}
            </span>

            {%- if settings.product_save_amount -%}
              {%- if settings.product_save_type == 'dollar' -%}
                {% capture saved_amount %}{{ current_variant.compare_at_price | minus: current_variant.price | money }}{% endcapture %}
              {%- else -%}
                {% capture saved_amount %}{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | round }}%{% endcapture %}
              {%- endif -%}
              <span id="SavePrice-{{ section_id }}" class="product__price-savings{% if hide_sale_price %} hide{% endif %}">
                {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
              </span>
            {%- endif -%}

            <div class="product__unit-price product__unit-price--spacing product__unit-price-wrapper--{{ section_id }}{% unless current_variant.unit_price_measurement %} hide{% endunless %}">
              {%- capture unit_price_base_unit -%}
                <span class="product__unit-base--{{ section_id }}">
                  {%- if current_variant.unit_price_measurement -%}
                    {%- if current_variant.unit_price_measurement.reference_value != 1 -%}
                      {{ current_variant.unit_price_measurement.reference_value }}
                    {%- endif -%}
                    {{ current_variant.unit_price_measurement.reference_unit }}
                  {%- endif -%}
                </span>
              {%- endcapture -%}

              <span class="product__unit-price--{{ section_id }}">{{ current_variant.unit_price | money }}</span>/{{ unit_price_base_unit }}
            </div>

            {%- if settings.inventory_enable or settings.inventory_transfers_enable -%}
              {%- assign variants_with_inventory_tracking = product.variants | where: 'inventory_management', 'shopify' -%}

              <script>
                // Store inventory quantities in JS because they're no longer
                // available directly in JS when a variant changes.
                // Have an object that holds all potential products so it works
                // with quick view or with multiple featured products.
                window.inventories = window.inventories || {};
                window.inventories['{{section_id}}'] = {};
                 {% for variant in variants_with_inventory_tracking %}
                  window.inventories['{{section_id}}'][{{variant.id}}] = {
                    'quantity': {{ variant.inventory_quantity | default: 0 }},
                    'incoming': {{ variant.incoming | default: false | json }},
                    'next_incoming_date': {{ variant.next_incoming_date | date: format: 'date' | json }}
                  };
                 {% endfor %}
              </script>

              {% comment %}
                If loaded in quick view, it might be from a JS-loaded function
                that loads recommended products. If that's the case, the above
                JS will not set the variant inventory. Add it to an accessible
                data div to read later instead.
              {% endcomment %}
              {%- if isModal -%}
                <div
                  data-section-id="{{ section_id }}"
                  class="hide js-product-inventory-data"
                  aria-hidden="true"
                  >
                  {%- for variant in variants_with_inventory_tracking -%}
                    <div
                      class="js-variant-inventory-data"
                      data-id="{{ variant.id }}"
                      data-quantity="{{ variant.inventory_quantity | default: 0 }}"
                      data-incoming="{{ variant.incoming | default: false | json }}"
                      data-date="{{ variant.next_incoming_date | date: format: 'date' | json }}"
                    >
                    </div>
                  {%- endfor -%}
                </div>
              {%- endif -%}
            {%- endif -%}

            <hr class="hr--small">

            {%- unless isModal -%}
              {% comment %}
                Shopify's product form attaches a number of tracking
                scripts that cause slower load times and false statistics.
                Quick view modals request these on-demand.
              {% endcomment %}
              {% include 'product-form', section_id: section_id %}
            {%- else -%}
              <div id="ProductFormHolder-{{ section_id }}" class="product-form-holder" data-url="{{ product.url }}"></div>
            {%- endunless -%}

            {%- if settings.trust_image != blank -%}
              <div class="aos-animate trust-image" style="max-width: {{ settings.trust_image.width }}px;">
                <div class="image-wrap " style="height: 0; padding-bottom: {{ 100 | divided_by: settings.trust_image.aspect_ratio }}%;">
                  {%- assign img_url = settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                  <img class="lazyload"
                      data-src="{{ img_url }}"
                      data-widths="[360, 540]"
                      data-aspectratio="{{ settings.trust_image.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ settings.trust_image.alt }}">
                  <noscript>
                    <img class="lazyloaded" src="{{ settings.trust_image | img_url: '540x' }}" alt="{{ settings.trust_image.alt }}">
                  </noscript>
                </div>
              </div>
            {%- endif -%}

            {%- unless description_style == 'full' -%}
              <div class="product-single__description rte">
                {{ product.description }}
              </div>

              {% include 'product-additional-content', section_id: section_id %}
            {%- endunless -%}
            {%- if section.settings.cbd_text != blank and product.tags contains 'CBD' -%}
            {{ section.settings.cbd_text }}
            {%- endif -%}

            {%- if social -%}
              {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
            {%- endif -%}
          </div>
        </div>

        {%- unless image_position == 'left' -%}
          <div class="grid__item {{ product_image_width }}">
            {% include 'product-images', section_id: section_id, isModal: isModal, thumbnail_position: thumbnail_position, thumbnail_arrows: thumbnail_arrows %}
          </div>
        {%- endunless -%}
      </div>

      {%- if description_style == 'full' -%}
        <div class="product-single__description-full rte">
          {{ product.description }}
        </div>

        {% include 'product-additional-content', section_id: section_id %}
      {%- endif -%}
    </div>
  </div>
</div>

 

product-images.liquid

{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

{%- unless product.empty? -%}
  <div
    data-product-images
    data-zoom="{{ settings.product_zoom_enable }}"
    data-has-slideshow="true">
    <div class="product__photos product__photos-{{ section_id }} product__photos--{{ thumbnail_position }}">

      <div class="product__main-photos" data-aos>
        <div id="ProductPhotos-{{ section_id }}">
          {%- for image in product.images -%}
            {%- assign is_featured = false -%}
            {%- if featured_image == image -%}
              {%- assign is_featured = true -%}
            {%- endif -%}
            {%- assign image_alt = image.alt -%}
            {%- assign has_product_video = false -%}
            {%- assign video_type = '' -%}
            {%- if image.alt contains 'youtube.com/watch' -%}
              {%- assign has_product_video = true -%}
              {%- assign video_type = 'youtube' -%}
              {%- assign video_id = image.alt | split: 'v=' -%}
              {%- assign video_id = video_id[1] | split: '&' | first -%}
            {%- endif -%}
            {%- if image.alt contains 'youtu.be/' -%}
              {%- assign has_product_video = true -%}
              {%- assign video_type = 'youtube' -%}
              {%- assign video_id = image.alt | split: '.be/' -%}
              {%- assign video_id = video_id[1] | split: '&' | first -%}
            {%- endif -%}
            {%- if image.alt contains 'vimeo.com' -%}
              {%- assign has_product_video = true -%}
              {%- assign video_type = 'vimeo' -%}
              {%- assign video_id = image.alt | split: '.com/' -%}
              {%- assign video_id = video_id[1] | split: '/' | first -%}
            {%- endif -%}
            {%- if image.alt contains '.mp4' -%}
              {%- assign has_product_video = true -%}
              {%- assign video_type = 'mp4' -%}
            {%- endif -%}
            {%- if has_product_video -%}
              {%- assign image_alt = product.title -%}
            {%- endif -%}
            <div class="{% if is_featured %}starting-slide{% else %}secondary-slide{% endif %}" data-index="{{ forloop.index0 }}">
              <div class="product-image-main product-image-main--{{ section_id }}">
                <div class="image-wrap
                  {% if has_product_video and video_type == 'youtube' %}{% endif %}
                  {% if has_product_video and video_type == 'vimeo' %} {% endif %}
                  {% if has_product_video and video_type == 'mp4' %} {% endif %}" style="height: 0; padding-bottom: {{ 100 | divided_by: image.aspect_ratio }}%;">
                  {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                  {%- assign zoom_img_url = image | img_url: product_zoom_size -%}

                  {%- if is_featured -%}
                    <img class="{% if settings.product_zoom_enable %}photoswipe__image{% endif %} lazyload"
                      data-photoswipe-src="{{ zoom_img_url }}"
                      data-photoswipe-width="{{ image.width }}"
                      data-photoswipe-height="{{ image.height }}"
                      data-index="{{ forloop.index }}"
                      data-src="{{ img_url }}"
                      data-widths="[360, 540, 720, 900, 1080]"
                      data-aspectratio="{{ image.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ image_alt | escape }}">
                    <noscript>
                      <img class="lazyloaded" src="{{ image | img_url: product_image_size }}" alt="{{ image_alt | escape }}">
                    </noscript>
                  {%- else -%}
                    <img class="{% if settings.product_zoom_enable %}photoswipe__image{% endif %} lazyload"
                      data-photoswipe-src="{{ zoom_img_url }}"
                      data-photoswipe-width="{{ image.width }}"
                      data-photoswipe-height="{{ image.height }}"
                      data-index="{{ forloop.index }}"
                      data-src="{{ img_url }}"
                      data-widths="[360, 540, 720, 900, 1080]"
                      data-aspectratio="{{ image.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ image_alt | escape }}">
                    <noscript>
                      <img class="lazyloaded" src="{{ image | img_url: product_image_size }}" alt="{{ image_alt | escape }}">
                    </noscript>
                  {%- endif -%}

                  {%- if settings.product_zoom_enable -%}
                    <button type="button" class="btn btn--body btn--circle js-photoswipe__zoom product__photo-zoom">
                      <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
                      <span class="icon__fallback-text">{{ 'general.accessibility.close_modal' | t }}</span>
                    </button>
                  {%- endif -%}
                </div>
                {%- if has_product_video -%}
                  {%- assign aspect_width = settings.product_video_width | divided_by: 100.00 -%}
                  {%- assign aspect_ratio = settings.product_video_height | divided_by: aspect_width -%}
                  <div
                    data-video-type="{{ video_type }}"
                    class="product__video-wrapper
                      {% if has_product_video %}
                        {% if video_type == 'youtube' or video_type == 'vimeo' %}
                          loading
                        {% endif %}
                      {% endif %}"
                    data-video-style="{{ settings.product_video_style }}"
                    style="padding-bottom: {{ aspect_ratio }}%;">
                    {%- if video_type == 'youtube' -%}
                      <div
                        id="ProductVideo-{{ section_id }}-{{ forloop.index }}"
                        class="product__video"
                        data-image-count="{{product.images | size }}"
                        data-video-type="{{ video_type }}"
                        data-video-style="{{ settings.product_video_style }}"
                        data-youtube-id="{{ video_id }}"
                        data-video-width="{{ settings.product_video_width }}"
                        data-video-height="{{ settings.product_video_height }}">
                      </div>
                    {%- endif -%}
                    {%- if video_type == 'vimeo' -%}
                      <div
                        id="ProductVideo-{{ section_id }}-{{ forloop.index }}"
                        class="product__video"
                        data-image-count="{{product.images | size }}"
                        data-video-type="{{ video_type }}"
                        data-video-style="{{ settings.product_video_style }}"
                        data-video-id="{{ video_id }}"
                        data-video-width="{{ settings.product_video_width }}"
                        data-video-height="{{ settings.product_video_height }}">
                      </div>
                    {%- endif -%}
                    {%- if video_type == 'mp4' -%}
                      <video
                        loop playsinline
                        {% if settings.product_video_style == 'muted' %}muted{% endif %}
                        {% if settings.product_video_style == 'unmuted' %}controls{% endif %}
                        controlsList="nodownload"
                        data-image-count="{{product.images | size }}"
                        data-video-type="{{ video_type }}"
                        data-video-style="{{ settings.product_video_style }}"
                        {% if isModal %}
                          data-video-src="{{ image.alt }}"
                        {% endif %}
                        id="ProductVideo-{{ section_id }}-{{ forloop.index }}"
                        class="product__video">
                        {%- unless isModal -%}
                          <source src="{{ image.alt }}" type="video/mp4">
                        {%- endunless -%}
                        Your browser does not support the video tag.
                      </video>
                    {%- endif -%}
                  </div>
                {%- endif -%}
              </div>
            </div>
          {%- endfor -%}
        </div>
      </div>

      <div
        id="ProductThumbs-{{ section_id }}"
        class="product__thumbs product__thumbs--{{ thumbnail_position }} product__thumbs-placement--{{ image_position }} {% if product.images.size == 1 %} medium-up--hide{% endif %} small--hide"
        data-position="{{ thumbnail_position }}"
        data-arrows="{{ thumbnail_arrows }}"
        data-aos>

        {%- if product.images.size > 1 -%}
          {%- for image in product.images -%}
            {%- assign image_alt = image.alt -%}
            {%- assign has_product_video = false -%}
            {%- assign video_type = '' -%}
            {%- if image.alt contains 'youtube.com/watch' -%}
              {%- assign has_product_video = true -%}
              {%- assign video_type = 'youtube' -%}
            {%- endif -%}
            {%- if image.alt contains 'youtu.be/' -%}
              {%- assign has_product_video = true -%}
              {%- assign video_type = 'youtube' -%}
            {%- endif -%}
            {%- if image.alt contains 'vimeo.com' -%}
              {%- assign has_product_video = true -%}
              {%- assign video_type = 'vimeo' -%}
            {%- endif -%}
            {%- if image.alt contains '.mp4' -%}
              {%- assign has_product_video = true -%}
              {%- assign video_type = 'mp4' -%}
            {%- endif -%}
            {%- if has_product_video -%}
              {%- assign image_alt = product.title -%}
            {%- endif -%}

            <div class="product__thumb-item"
              data-index="{{ forloop.index0 }}">
              <div class="image-wrap" style="height: 0; padding-bottom: {{ 100 | divided_by: image.aspect_ratio }}%;">
                <div
                  class="product__thumb product__thumb-{{ section_id }} js-no-transition"
                  data-id="{{ image.id }}">
                  {%- if has_product_video -%}
                    <span class="product__thumb-play">
                      <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-play" viewBox="0 0 32 32"><path class="st0" d="M9.3 6.2l17.1 9.7-17.1 9.7"/></svg>
                    </span>
                  {%- endif -%}

                  {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                  <img class="animation-delay-{{ forloop.index | times: 3 }} lazyload"
                      data-src="{{ img_url }}"
                      data-widths="[360, 540, 720, 900, 1080]"
                      data-aspectratio="{{ image.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ image_alt | escape }}">
                  <noscript>
                    <img class="lazyloaded" src="{{ image | img_url: product_thumb_size }}" alt="{{ image_alt | escape }}">
                  </noscript>
                </div>
              </div>
            </div>
          {%- endfor -%}
        {%- endif -%}
      </div>
    </div>
  </div>
{%- else -%}
  <div class="product__photos product__photos-{{ section_id }}">
    <div class="product__main-photos" style="width: 100%">
      <div id="ProductPhotos-{{ section_id }}">
        <div data-index="{{ forloop.index0 }}">
          <a href="#">
            {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
          </a>
        </div>
      </div>
    </div>
  </div>
{%- endunless -%}
0 Likes