Adding Video URL Feature to Third-Party Themes

This feature allows merchants to showcase both images and videos for their products in a seamless and visually engaging manner. Follow this guide to implement the new functionality using the media property in the single product view.

---

Overview

In the single product view, a new property called media consolidates both images and videos of a product. This enhancement enables merchants to display richer content, such as YouTube videos, alongside product images.

---

Key Features

• Loop through the media property to access all associated media items.
• Identify videos using the provider and link properties.
• Use video thumbnails from the image.full_size property.
• Embed videos dynamically using a YouTube embed link.

---

Implementation Steps

1. Accessing Media Items

Replace your existing loop for images with one that iterates over the media property. This ensures that both images and videos are processed correctly.

2. Differentiating Video Objects

• Videos are identified by the presence of provider and link properties.
• Each video object contains an image object with a thumbnail of the video, accessible via image.full_size.

3. Generating a YouTube Embed Link

Use the following JavaScript function to convert the video URL into a YouTube embed link. This link can be used as the src attribute of an iframe.

function getIframeLink(videoLink) {
  const videoIdMatch = videoLink.match(
    /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?|.*[?&]v)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
  );

  if (videoIdMatch && videoIdMatch[1]) {
    const videoLinkId = videoIdMatch[1];
    return `https://www.youtube.com/embed/${videoLinkId}?autoplay=1&enablejsapi=1`;
  }

  return null;
}

---

4. Adding the Video to the Product Page

To display a video on the product page:

1. Use the thumbnail from image.full_size to represent the video visually.
2. Add the following iframe alongside the thumbnail. The iframe's src is set dynamically using the getIframeLink function:

<iframe
  width="100%"
  height="100%"
  src=""
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  style="max-width: 100%;"
></iframe>

:::info[]
When the play button is clicked, the iframe should overlay the thumbnail. If the slides change in the carousel, the iframe should close.
:::

---

5. Implementing the Play Button

• Overlay a play button on the video thumbnail to indicate it is clickable.
• When the play button is clicked:
  1. Hide the thumbnail.
  2. Set the iframe's src using the getIframeLink function.
  3. Display the iframe to play the video.

---

User Example

Imagine a merchant selling a product with both images and a YouTube demo video. Using this feature:

1. The product page displays all images and videos under the media property.
2. Videos are marked with a play button overlay on their thumbnail.
3. When a customer clicks the play button, the YouTube video plays in an embedded iframe, enhancing the product presentation.

---

Benefits for Merchants

• Provides a richer, multimedia product display.
• Improves customer engagement with interactive video content.
• Simplifies the process of managing images and videos in a unified property.

:::info[]
This documentation ensures that ZID merchants can easily understand and utilize the new video URL feature. If you have further questions or need assistance, feel free to reach out to ZID support.
:::