Youtube embed video on the hompage

Store Design
,
1

Hello,
I would like to add youtube embedded videos on the homepage.
Goldi was very helpful and has written code to display videos in collection pages.
Unfortunately I am not able to transfer this to my homepage. I do not need metafields for the hompeage.

Here is the code that works perfectly for the collection pages.

{{ collection.metafields.custom.video1.value }}
.video-container { display: flex; justify-content: center; align-items: center; width: 100%; padding: 20px 0; } .responsive-video iframe { width: 80%; /* Adjust width as needed */ max-width: 900px; /* Prevent it from becoming too large */ aspect-ratio: 16 / 9; border-radius: 10px; /* Optional: rounded corners */ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Optional: shadow for better appearance */ }
3 Likes
2

Thank you for reaching out regarding your request to add YouTube embedded videos to your homepage. I understand that you’re looking to integrate videos in a similar manner to the way they are displayed on your collection pages, but without using metafields for the homepage.

After reviewing the code you shared and the requirements, I propose the following solution that will allow us to seamlessly add the embedded YouTube videos to your homepage, while ensuring both functionality and aesthetics are maintained:

Problem Understanding:- You currently have a working solution for embedding YouTube videos on your collection pages using the following code:

html

Copy

{{ collection.metafields.custom.video1.value }}
.video-container { display: flex; justify-content: center; align-items: center; width: 100%; padding: 20px 0; } .responsive-video iframe { width: 80%; max-width: 900px; aspect-ratio: 16 / 9; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); }

  • The code works perfectly on collection pages, but you are unable to transfer this functionality to your homepage.

  • The use of metafields for the homepage is not required.

Proposed Solution:

To address the issue of embedding YouTube videos on your homepage, I recommend the following approach:

1. Embedding YouTube Videos without Metafields:- Since you do not need metafields for the homepage, I will create a simple solution to embed videos directly using HTML code on the homepage.

  • You can easily insert the YouTube video iframe code into the homepage template or use a custom section where you can manage video URLs directly in the admin panel.

2. Customization for Homepage:- We will modify the structure to embed YouTube videos dynamically, without relying on metafields. You will simply need to provide the YouTube video URL, and I will adjust the layout so it looks consistent with the design of your site.

  • A custom section will be created where you can add the video URLs (in an easy-to-edit format) from the Shopify admin panel. This will allow you to add or update the video whenever needed without needing further development work.

3. Responsive Design:- We will retain the responsive design you already have for the collection pages, ensuring the video is correctly displayed across all screen sizes, and adapting to mobile, tablet, and desktop views seamlessly.

4. Code Implementation:

I will implement the code below directly into your homepage template or a custom homepage section:

html

Copy

.video-container { display: flex; justify-content: center; align-items: center; width: 100%; padding: 20px 0; } .responsive-video iframe { width: 80%; max-width: 900px; aspect-ratio: 16 / 9; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } 
 

You can replace your-video-id with the actual video ID of the YouTube videos you’d like to embed.

Benefits of this Approach:- Simplicity: By directly embedding YouTube videos in the template, we eliminate the need for metafields and make it easy for you to manage content directly.

  • Efficiency: This solution will be quick to implement and easy to maintain over time.

  • Flexibility: You can add as many videos as needed to the homepage in the future by simply adjusting the code for additional iframe embeds.

  • Responsiveness: The embedded video will automatically adjust its size to fit within the design of your homepage across different devices.

Next Steps:1. I will work on implementing the changes to your homepage and integrate the video embedding functionality.

  1. I will provide you with a custom section where you can easily add or update YouTube URLs in the future.

  2. Once the changes are applied, we will test to ensure the videos display correctly on all devices and browsers.

I look forward to hearing your thoughts on this solution and any additional preferences you might have. Please let me know if you have any specific design requests or further clarifications.

Best regards,

3

Best would be to edit that code and use a custom liquid section. That seems to be the easiest way for me. Can anyone help me with that?

1 Like
4

sure!!!

what theme did you install?

Most themes are written in js tho so that’s not an issue, how can we connect?

5

Number 3 sounds great. I just dont understand what the video ID is.

here is one embed code. Can I find it here?

6

Unfortunately not now. But I am currently on reworking the page and might need more help. Do I find the video ID in that embed code?

7

Ah got the video ID. But the video is way too small. Is there a chance to increase the size?

Delia3_0-1743523102668.png
Delia3_0-1743523102668.png1539Ă—960 177 KB

8

Yes, you can find the video ID in the embed code. The video ID is the string of characters that appears after /EMBEDED in the URL.

For the embed code you provided:

<iframe width="560" height="315" src="https://www.youtube.com/embed/NGx77vejlFQ?si=n75mqBNfQm391Xsm" 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>

The video ID is NGx77vejlFQ.

So, you would use NGx77vejlFQ. as the ID to embed this specific video in your code.

9

thank you very much. Now is only the size issue left. It is way too small. What do I have to do to make it bigger?

1 Like
10

Got it, works great. Last thing is that the video is placed too far on the right side of the screen. How can I center it or move it more left?

11

The issue happens because you’re trying to source the collection metafield from the main page. It simply doesn’t have access.

To solve this, you’d need to create a custom metafield definition and then create a multiline-textfield for it. Add an entry with YouTube iframe code (and get the entry handle).

Then source it from the custom liquid block on the main page with this syntax:

{{ shop.metaobjects.metaobjectdefinitionname.metaobjectentryhandle.fieldname.value }}

If done correctly, the embed should appear. Just tested.

Screenshot_3.png
Screenshot_3.png1071Ă—667 121 KB

Feel free to message me if you need help implementing this.