Using a dynamic embedded video for product page tab

[Hunter11]

I am using Booster Theme. I cannot seem to figure out how to dynamically embed a youtube video into a product page tab, so that each product can show a different how to video.

I've attempted many different approaches with no luck.

In the attached photo, you can see that I can use a metafield in the tab. I tried using a json metafield, but it seems I can't place a youtube embed file in a json metafield. Any help towards a solution is much appreciated. Thank you

[Xipirons]

Hi @Hunter11 

Here's a potential solution:

(please note that you may need to adapt the code to work with your specific Booster theme version and setup)

1. Create a metafield for each product to store the YouTube video ID or URL. Use a simple "single line text" type metafield, not JSON. For example, name it "youtube_video".

2. In the Booster theme editor, go to the product page and add or edit the "Tab" section where you want the video to appear.

3. In the Tab content, select "Metafield" as the content type. Then choose the "youtube_video" metafield you created.

4. To render the YouTube embed, you'll need to modify the product template code slightly. In the code editor, open the product-template.liquid file.

5. Look for the code that renders the Tab content, it will look something like:

{% when 'metafield' %}
{{ product.metafields.custom[block.settings.key] }}

6. Replace that code with the following:

{% when 'metafield' %}
{% assign video_url = product.metafields.custom[block.settings.key] %}
{% if video_url contains "https://youtu.be/" or video_url contains "https://www.youtube.com/watch?v=" %}
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/{{ video_url | split: "/" | last }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
{% else %}
{{ video_url }}
{% endif %}

This checks if the metafield value is a valid YouTube URL, extracts the video ID, and renders it in an iframe embed. Otherwise, it just outputs the metafield value as is.

7. Save the file and you should now see the YouTube video dynamically embedded on the product pages that have the "youtube_video" metafield populated.

The key points are:

- Use a simple text metafield to store the YouTube URL or ID
- Modify the product template code to check for a valid URL and render the embed
- Assign the metafield in the Tab section settings

Dynamically embedding unique videos on Shopify product pages is definitely achievable with metafields and some light theme code editing.

[Hunter11]

That code unfortunately did not work, it also rendered current tabs' content unviewable.

my other product tabs use rich text metafields and I do not want to lose that.

Here is the current code on the Product page tab:

<div class="product--tab__content {% if first %}tab--show{% endif %} {% if block.settings.content == 'description' or block.settings.content contains 'page' %}{% endif %}" id="tab--{{-block.id}}">
    {%- case block.settings.content %}
        {% when 'description' %}
            {{product.description}}
        {% when 'reviews' %}
            {% if settings.reviewApp == "loox" %}
                <div id="looxReviews" data-product-id="{{product.id}}" class="loox-reviews-default">{{ product.metafields.loox.reviews }}</div>
            {% elsif settings.reviewApp == "shopifyReviews" %}
                <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
            {% elsif settings.reviewApp == "alireviews" %}
                <div id="shopify-ali-review" product-id="{{ product.id }}"> {{ shop.metafields.review_collector.review_code }} </div>
            {% endif %}
        {% when 'custom' %}
            {{block.settings.customContent}}
        {% when 'metafield' %}
            {% assign metafield = product.metafields[block.settings.metafieldNS][block.settings.metafieldKey] %}
            {{metafield | metafield_tag}}
        {% when 'page' %}
            {% assign page = pages[block.settings.page] %}
            {{page.content}}
        {% when 'productPage' %}
            {% assign handle = 'content-' | append: product.handle %}
            {% assign page = pages[handle] %}
            {% assign price = product.price | money | strip_html %}
            {% assign prediscount = product.compare_at_price_max | money | strip_html %}
            {{page.content | replace: '%product%', product.title | replace: '%brand%', product.vendor | replace: '%price%', price | replace: '%prediscount%', prediscount}}
    {% endcase %}
</div>

{% comment %}
{% blockdef %}

{% endblockdef %}
{% endcomment %}

 Hopefully, seeing the original code, this will be an easy fix and thank you for all your help!

[Hunter11]

@Xipirons I realized I did not tag you in my previous reply, please the above response. Thank you!

[Xipirons]

Hi @Hunter11 

While preserving the existing code, here are the modifications to try :

<div class="product--tab__content {% if first %}tab--show{% endif %} {% if block.settings.content == 'description' or block.settings.content contains 'page' %}{% endif %}" id="tab--{{-block.id}}">
{%- case block.settings.content %}
{% when 'description' %}
{{product.description}}
{% when 'reviews' %}
{% if settings.reviewApp == "loox" %}
<div id="looxReviews" data-product-id="{{product.id}}" class="loox-reviews-default">{{ product.metafields.loox.reviews }}</div>
{% elsif settings.reviewApp == "shopifyReviews" %}
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
{% elsif settings.reviewApp == "alireviews" %}
<div id="shopify-ali-review" product-id="{{ product.id }}"> {{ shop.metafields.review_collector.review_code }} </div>
{% endif %}
{% when 'custom' %}
{{block.settings.customContent}}
{% when 'metafield' %}
{% assign metafield = product.metafields[block.settings.metafieldNS][block.settings.metafieldKey] %}
{% if metafield contains "https://youtu.be/" or metafield contains "https://www.youtube.com/watch?v=" %}
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/{{ metafield | split: "/" | last }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
{% else %}
{{metafield | metafield_tag}}
{% endif %}
{% when 'page' %}
{% assign page = pages[block.settings.page] %}
{{page.content}}
{% when 'productPage' %}
{% assign handle = 'content-' | append: product.handle %}
{% assign page = pages[handle] %}
{% assign price = product.price | money | strip_html %}
{% assign prediscount = product.compare_at_price_max | money | strip_html %}
{{page.content | replace: '%product%', product.title | replace: '%brand%', product.vendor | replace: '%price%', price | replace: '%prediscount%', prediscount}}
{% endcase %}
</div>

The key changes are:

1. In the `{% when 'metafield' %}` block, we add a condition to check if the metafield value contains a valid YouTube URL.

2. If it does, we extract the video ID from the URL and display the video in an `<iframe>` tag inside a `<div class="video-wrapper">` container.

3. If not, we display the metafield content normally with `{{metafield | metafield_tag}}`.

With these modifications, if the value of the selected metafield is a valid YouTube URL, the video will be dynamically embedded in the corresponding tab. For other types of metafields, the behavior will remain unchanged.

You just need to create a metafield for each product where you want to display a video, specifying the full YouTube URL as the value.

Don't forget to add some CSS to make the video responsive if needed. For example:

.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
}

.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

This should allow you to easily embed unique YouTube videos on Shopify product pages using metafields, while preserving the existing tab functionalities.

Don't hesitate to share access to your admin with me in a private message if there is still a problem, and I will help you fix it