Insert dynamic video resource for product and make it responsive

A custom just reached out to us, they said they have lot of products and each product has its own product video. However, not all products have a video link.

So in this case, I will apply the metafields feature to help the merchant.

 

Step 1: I create a  Single line text Metafields for products - product.metafields.custom.product_video

 

Step 2: add a custom liquid section to the default product page, and fill in with the code below:

<iframe class="responsive-video" width="560" height="315" src="{{product.metafields.custom.product_video}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

Step 3: make this video responsive

<style>
.responsive-video {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
display: block;
margin: auto;
max-width:1140px;
}
</style>

 

Step 4: add the embed link to the product we want