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

[nosmh]

... 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

[Hedef_Agency]

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

[nosmh]

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!

[Hedef_Agency]

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' -%}

[Hedef_Agency · 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>

[nosmh]

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