[Solved] Adding Media to plak theme

Hi @luigi0411,

Katrine here from Plak Theme.

Let's say you would like to embed this Youtube video : c https://www.youtube.com/watch?v=BmYsMnZZ3E

From Youtube

First, click on Share => Embed and copy the code to embed which looks like :

<iframe width="560" height="315" src="https://www.youtube.com/embed/BmYsMnZZ3Ec" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

From Plak Theme

If you would like to add videos to all your products pages at once, please follow these steps :

• From your Shopify dashboard, click Online store => Actions => Edit code
• Open the file product-template.liquid
• Paste the code where you would like the video to appear

Katrine| Plak theme support
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as a Solved Solution

Hello luigi0411,

Sure. First you have to upload a video on youtube and get embedded code from it. you can visit this link to learn how to get embedded code from youtube.

After that, Follow the below steps to add embedded video in your product page :

• From your Shopify admin, go to Products.
• Click on particular product that you want to have video on its detailed(product) page:
• Click on insert video in text editor( https://prnt.sc/rtcwb9 ) and paste embedded iframe code in popup box ( https://prnt.sc/rtcvzi )
• Then click on Insert video( https://prnt.sc/rtcyb9 ).
• Click Save.

You will be able to see video on your product page.

Note: If you want to change video height and width, you can edit it from Iframe tag( https://prnt.sc/rtczew ) according to your requirement.

Thank you.

@plaktheme @Parth Goyani 

Thank you for your reply.

I'm sorry I didn't make it clear. I want to add video here (this is a new feature of shopify).

https://tinyurl.com/tf5fffx

https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video

This is the official tutorial provided by shopify. I tried it on the plak theme, but it does not display properly.

Thank You！

Hi @luigi0411

Thanks fr letting us know this new feature, we will update our Product template snippet and add the required snippet to showcase videos in the product page and we will get back to you with the detailed tutorial to make it works in Plak theme.

Kind regards,
Katrine

{% case media.media_type %}
{% when 'image' %}
<li class="  product-single__thumbnails-item js">
  <a href="{{ media | img_url: product_image_zoom_size, scale: product_image_scale }}"
     class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
     data-thumbnail-id="{{ media.id }}"
     {% if enable_zoom %}data-zoom="{{ media | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
    <img class="product-single__thumbnail-image   lazyload animation--{{settings.lazyloading-effect}}" data-src="{{ media | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}">
  </a>
</li>
{% when 'external_video' %}
<li class="  product-single__thumbnails-item js">
  <a href="{{ media | external_video_url }}"
     class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
     data-thumbnail-id="{{ media.id }}"
     {% if enable_zoom %}data-zoom="{{ media | external_video_url }}"{% endif %}>
    <div class="product-single__media" data-media-id="{{ media.id }}">
      {{ media | external_video_tag: class: "youtube_video product-single__thumbnail-image" }}
    </div>
  </a>
</li>
{% when 'video' %}
<li class="  product-single__thumbnails-item js">
  <div class="product-single__media" data-media-id="{{ media.id }}">
    {{ media | video_tag: controls: true }}
  </div>
</li>
{% when 'model' %}
<li class="  product-single__thumbnails-item js">
  <div class="product-single__media"  data-media-id="{{ media.id }}">
    {{ media | model_viewer_tag }}
  </div>
</li>
{% else %}
<li class="  product-single__thumbnails-item js">
  <div class="product-single__media" data-media-id="{{ media.id }}">
    {{ media | media_tag }}
  </div>
</li>
{% endcase %}

        {% for image in product.images %}
         <li class="  product-single__thumbnails-item js">
           <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
              class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
              data-thumbnail-id="{{ image.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   lazyload animation--{{settings.lazyloading-effect}}" data-src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">
           </a>
         </li>
         {% endfor %}

         {% for media in product.media %}
             {% include 'media' %}
         {% endfor %}

     {% for image in product.images %}
         {% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
         {% capture img_class %}product-featured-img{% endcapture %}
         {% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
         {% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
         {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
         {% include 'image-style' with small_style: true, width: height, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}
         <div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
            <div
            id="{{ zoom_img_id }}"
            style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"
            class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}"
            data-image-id="{{ image.id }}"
            {% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
            <img id="{{ img_id }}"
               class="feature-row__image {{ img_class }} lazyload animation--{{settings.lazyloading-effect}}{% unless featured_image == image %} lazypreload{% endunless %}"
               src="{{ image | img_url: '300x300' }}"
               data-src="{{ img_url }}"
               data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
               data-aspectratio="{{ image.aspect_ratio }}"
               data-sizes="auto"
               tabindex="-1"
               alt="{{ image.alt | escape }}">
         </div>
      </div>
      {% endfor %}

    {% for media in product.media %}
        {% capture img_id %}FeaturedImage-{{ section.id }}-{{ media.id }}{% endcapture %}
         {% capture img_class %}product-featured-img{% endcapture %}
         {% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ media.id }}{% endcapture %}
         {% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
        {%- assign img_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
         {% include 'image-style' with small_style: true, width: height, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}
        {% case media.media_type %}
        {% when 'image' %}
         <div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
            <div
            id="{{ zoom_img_id }}"
            style="padding-top:{{ 1 | divided_by: media.aspect_ratio | times: 100}}%;"
            class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.media.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == media %} hide{% endunless %}"
            data-image-id="{{ media.id }}"
            {% if enable_zoom %} data-zoom="{{ media | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
            <img id="{{ img_id }}"
               class="feature-row__image {{ img_class }} lazyload animation--{{settings.lazyloading-effect}}{% unless featured_image == media %} lazypreload{% endunless %}"
               src="{{ media | img_url: '300x300' }}"
               data-src="{{ img_url }}"
               data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
               data-aspectratio="{{ media.aspect_ratio }}"
               data-sizes="auto"
               tabindex="-1"
               alt="{{ media.alt | escape }}">
         </div>
      </div>
      {% when 'external_video' %}        
        <div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
          <div data-image-id="{{ media.id }}" 
               style="padding-top:{{ 1 | divided_by: media.aspect_ratio | times: 100}}%;"
               id="{{ zoom_img_id }}" class="product-single__photo {% unless featured_image == media %} hide{% endunless %} {% if product.media.size > 1 %} product-single__photo--has-thumbnails{% endif %}">            
          {{ media | external_video_tag: class: "mainFrameVideo feature-row__image product-featured-img " }}
          </div>
        </div>
      {% endcase %}
      {% endfor %}

        {% for image in product.images %}
            <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
               <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
               class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
               data-thumbnail-id="{{ image.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: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">
               </a>
            </li>
           {% endfor %}

          {% for media in product.media %}
           {% case media.media_type %}
           {% when 'image' %}
            <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
               <a href="{{ media.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
               class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
               data-thumbnail-id="{{ media.id }}"
               {% if enable_zoom %}data-zoom="{{ media.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
               <img class="product-single__thumbnail-image" src="{{ media.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}">
               </a>
            </li>
           {% when 'external_video' %}
           <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
             <a href="{{ media.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
               class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
               data-thumbnail-id="{{ media.id }}"
               {% if enable_zoom %}data-zoom="{{ media.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>            
               {{ media | external_video_tag: class: "product-single__thumbnail-image youtube_video mobile" }}
             </a>
           </li>
          {% endcase %}
        {% endfor %}

  .youtube_video{width:100%;pointer-events:none;
    &.mobile{height:50px;}
  }
  .mainFrameVideo{width:100%;height:100%;}

    <div class="grid__item one-tenth">
    {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
    {% for image in product.images %}
    {%- assign img_url = image | img_url: '' -%}
    <div>
      <div            
           class="product-single__photo {% unless featured_image == image %} hide{% endunless %}"
           data-image-id="{{ image.id }}">
        <img 
             class="feature-row__image  lazyload animation--{{settings.lazyloading-effect}}{% unless featured_image == image %} lazypreload{% endunless %}"
             data-src="{{ image | img_url: '140x140' }}"
             data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ image.aspect_ratio }}"
             data-sizes="auto"
             tabindex="-1"
             alt="{{ image.alt | escape }}">
      </div>
    </div>
    {% endfor %}
  </div>

    <div class="grid__item one-tenth">
    {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
    {% for media in product.media %}
    {%- assign img_url = media | img_url: '' -%}
    {% case media.media_type %}
    {% when 'image' %}
    <div>
      <div            
           class="product-single__photo {% unless featured_image == media %} hide{% endunless %}"
           data-image-id="{{ media.id }}">
        <img 
             class="feature-row__image  lazyload animation--{{settings.lazyloading-effect}}{% unless featured_image == media %} lazypreload{% endunless %}"
             data-src="{{ media | img_url: '140x140' }}"
             data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ media.aspect_ratio }}"
             data-sizes="auto"
             tabindex="-1"
             alt="{{ media.alt | escape }}">
      </div>
    </div>
    {% when 'external_video' %}
    <div>
      <div            
           class="product-single__photo {% unless featured_image == media %} hide{% endunless %}"
           data-image-id="{{ media.id }}">
        {{ media | external_video_tag: class: "youtube_video feature-row__image  lazyload " }}
      </div>
    </div>
    {% endcase %}

    {% endfor %}
  </div>

Hi @luigi0411

We have added the (Youtube videos feature) to Plak theme, simultaneously we have released a new version that includes this new feature, all our clients have received a mail about this with a direct link to download Plak V.1.5

In case you would like to embed this feature manually, HERE IS a tutorial we have posted today.

If you have any other question or concerns, feel free to get in touch with us.

Kindly,
Katrine