Solved

Embedding a YouTube video on a specific product page before the product details or...

nosmh
Tourist
8 0 2

... setting the default product image to be a youtube video.

 

I have been experimenting with adding an iframe embed, putting the product in a specific template for just that product where I can add a video to load just below the breadcrumbs, etc. Can't really get what I am looking for here.

 

Any thoughts?

 

Thanks,

 

nosmh

Joe aka NOSMH
Accepted Solution (1)

Hedef_Agency
Shopify Partner
6 2 1

This is an accepted solution.

Here's the final solution:
Make sure your youtube url is in this format 

https://www.youtube.com/embed/{{YOUTUBE-VIDEO-ID-GOES-HERE}}

 

{% if product.metafields.custom.embed_url %}
    <div id="yt-iframe-container"> 
        <iframe width="560" height="315" src="{{product.metafields.custom.embed_url}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>
{% endif %}

<style>
    #yt-iframe-container {
        display: flex;
        margin: 20px 0;
        justify-content: center;
    }
    #yt-iframe-container iframe {
        width: 50vw;
        height:50vh;
    }
    @media (max-width: 600px) {
        #yt-iframe-container iframe {
            width: calc(100% - 20px);
            padding: 0 10px;
        }
    }
</style>

 

 

Was i helpful? Buy me a Coffee!
Want to hire me? get in touch at hedef.agency

View solution in original post

Replies 5 (5)

Hedef_Agency
Shopify Partner
6 2 1

Hey Joe, 

If you are looking for a quick solution, creating another template specific for that product then adding the embed code in that template should work, can you provide more details as to what you tried and why it didn't work? 

A more detailed approach would be using dynamic data and JSON based template.

Thanks

Was i helpful? Buy me a Coffee!
Want to hire me? get in touch at hedef.agency
nosmh
Tourist
8 0 2

That is what I was thinking as well. I do have the specific products loading into specific templates for each of them. My thought was to add a line in there to render the video just above the "{%- section 'product' -%}" component. However I am seeing conflicting info on how to best get the video to display dynamically. We have a meta-field driven page header we have in the code already and I am seeing many speaking to using a metafield to call a youtube ID... so that is where I am currently.

 

Thanks for the quick response.

 

If you have a simple solution, I will gladly compensate you for it. 🙂

 

Currently the template we are running for this client has been heavily modified over the past few years by various parties, it is all still running liquid and ideally I would prefer to keep it that way if at all possible. I am hoping after this mod we can begin to put them on a path to moving to Shopify 2.0.

 

Thanks!

Joe aka NOSMH
Hedef_Agency
Shopify Partner
6 2 1

That could work also if you add a metafield for embed_url on the product you can then setup a conditional with an iframe like this -> 

Give it a try, if any issues feel free to message me privately and we can set up a call and I'll guide you through.

{% if product.metafields.custom.embed_url %}

<iframe width="560" height="315" src="{{product.metafields.custom.embed_url}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

{% endif %}
{%- section 'product' -%}

Was i helpful? Buy me a Coffee!
Want to hire me? get in touch at hedef.agency

Hedef_Agency
Shopify Partner
6 2 1

This is an accepted solution.

Here's the final solution:
Make sure your youtube url is in this format 

https://www.youtube.com/embed/{{YOUTUBE-VIDEO-ID-GOES-HERE}}

 

{% if product.metafields.custom.embed_url %}
    <div id="yt-iframe-container"> 
        <iframe width="560" height="315" src="{{product.metafields.custom.embed_url}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>
{% endif %}

<style>
    #yt-iframe-container {
        display: flex;
        margin: 20px 0;
        justify-content: center;
    }
    #yt-iframe-container iframe {
        width: 50vw;
        height:50vh;
    }
    @media (max-width: 600px) {
        #yt-iframe-container iframe {
            width: calc(100% - 20px);
            padding: 0 10px;
        }
    }
</style>

 

 

Was i helpful? Buy me a Coffee!
Want to hire me? get in touch at hedef.agency
nosmh
Tourist
8 0 2

Stellar. You all are the best, thank you so much for fighting through this with me. The effort is greatly appreciated.

Joe aka NOSMH