Youtube video in metafields

[Delia3]

Hello,
we want to update our collection pages with metafield that show embedded youtube videos.
I have seen a great video and copied that code in a custom liquid section.

{{ collection.metafields.custom.video1.value }}

.responsive-video {aspect-ratio: 16 / 9; width: 70% heigth: auto;}

The result displays the embedded metafield video which is great.

But the placement do not look nice.

Can anyone help how to increase the video and how to move it to the middle of the page. It stucks to the left right now.

And does anyone have an idea how to generally improve the design?

Best would be to include it in a video section. But it seems that they do not support embedded video metafields.

[goldi07]

Hello @Delia3

To improve the placement and design of the embedded YouTube video using metafields, follow these steps:

Fix Alignment (Center the Video)
Your issue is that the video is aligning to the left because it’s inside a div without centering styles. Modify your Liquid code like this:

  

    {{ collection.metafields.custom.video1.value }}
  

Changes & Improvements

1. Centered the Video
   . Used display: flex; justify-content: center; to align it in the middle.
2. Increased Video Size
   . Set width: 80% (you can change this to 90% or max-width: 1000px depending on your preference).
3. Added Padding for Spacing
   . Added padding: 20px 0; to give breathing room.
4. Added a Shadow Effect & Rounded Corners (Optional but improves aesthetics)
   . box-shadow makes it stand out.
   . border-radius: 10px; softens edges.
   Alternative: Using a Video Section Instead of Custom Liquid
   If you want to use a native Shopify “Video” section, it doesn’t support embedded videos directly via metafields, but you can use an iframe URL metafield and add it via the Shopify UI.

Thank you

[Delia3]

Hello Goldi,
great thank you very much. That improvement works very well.

Can you also maybe help with these improvements?

1. if there is no metafield at the collection, the section should not be displayed.
2. a second video (right next to the first one with an if clause as well, if there is no second video).

[goldi07]

Hey thanks please like and mark my solution to accepted solution and I will try to fix your problem thank you

[goldi07]

Hey @Delia3

. Hiding the section if no metafield exists
. Displaying a second video next to the first (if available)
. Ensuring responsiveness (side-by-side on desktop, stacked on mobile)

Updated Code (Final Version) plz update the code with this new code

Use this in your Custom Liquid section on the collection page:

{% if collection.metafields.custom.video1.value or collection.metafields.custom.video2.value %}
  
    
    {% if collection.metafields.custom.video1.value %}
      

        <iframe src="{{ collection.metafields.custom.video1.value }}" allowfullscreen="">
        </iframe>
      

    {% endif %}
    
    {% if collection.metafields.custom.video2.value %}
      
        <iframe src="{{ collection.metafields.custom.video2.value }}" allowfullscreen="">
        </iframe>
      

    {% endif %}
  
  

  
{% endif %}

Key Fixes & Improvements
. Section is hidden if no metafield exists
. Second video appears next to the first if available
. Videos stay centered & responsive
. Better spacing and design

This will now only show the section when at least one video metafield is set, and if both are available, they will appear side-by-side on desktop and stacked on mobile.

let me know if you need any help

Thank you

[Delia3]

Hi Goldi,
unfortunately this update did not work. I have created a second collection metafield video 2.

With empty metafield 2 it displays an error message. And if I enter something in video1 and video2 it only displays video1.

[goldi07]

Hey @Delia3

Updated Code (Fix for Second Video Issue)
This version ensures: The section is hidden if neither video1 nor video2 exists.
If video1 exists, it displays.
If video2 exists, it appears next to video1 (on desktops) or below (on mobile).

Use this in your Custom Liquid section:

{% if collection.metafields.custom.video1.value or collection.metafields.custom.video2.value %}
  
    
    {% if collection.metafields.custom.video1.value %}
      

        {{ collection.metafields.custom.video1.value }}
      

    {% endif %}
    
    {% if collection.metafields.custom.video2.value %}
      
        {{ collection.metafields.custom.video2.value }}
      

    {% endif %}

  

  
{% endif %}

Fixes & Improvements:
. Fixed the second video issue – now both videos display properly side by side.
. Videos are centered.
. Section is hidden when no metafield exists.
. Now responsive – videos display side by side on large screens and stack on mobile.
. Padding & spacing improved – videos look better with gaps.

Try this updated code and let me know if both videos appear correctly now!

Thank you

[Delia3]

Absolute beautiful. Really great work.

[goldi07]

Thank you