DocumentationCommerceCatalog Management

Add product videos

Last update: Tue Aug 29 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • Admin
  • Leader
  • User

To add a product video, you must first obtain an API Key from your Google account and enter it in the configuration of your store. Then, you can link to the video from the product.

Step 1: Get your YouTube API key

  1. Log in to your Google account and visit the Google Developers Console.

  2. In the search field at the top, enter YouTube Data API v3 and click the search icon.

  3. When the API page is displayed, make sure it is enabled.

  4. In the left panel, choose Credentials.

  5. Depending on whether you have credentials or not, do one of the following:

    • If you already have the needed credentials, copy the key in the API keys table.

    • If you do not already have credentials for this API, click Create Credentials at the top and follow the prompts to create the needed credentials. Under Get your credentials, copy the API key and click Done.

  6. Copy the API key to the clipboard.

  7. Click the Edit icon on the right and set the restrictions to make sure that the API key is limited to the correct referrers.

  8. Wait a few moments while the key is generated and then copy the key to the clipboard.

    In the next step, you will paste the key into your store’s configuration.

Step 2: Configure the key in Commerce

  1. On the Admin sidebar, go to Stores > Settings > Configuration.

  2. In the left panel, expand Catalog and choose Catalog underneath.

  3. Expand Expansion selector the Product Video section and paste your YouTube API key.

    Product Video configuration {width="600" modal="regular"}

  4. When complete, click Save Config.

  5. When prompted, refresh the cache.

  1. Open a product in edit mode.

  2. Scroll to and expand the Images and Videos section.

    Images and Videos {width="600" modal="regular"}

  3. click Add Video.

    If you haven’t yet configured your YouTube API key, click OK  to continue. You cannot link to a YouTube video, but you can go through the process.

  4. For Url, enter the URL of the YouTube or Vimeo video.

    New video for product {width="600" modal="regular"}

  5. Click outside the field and wait for feedback on the API key or video.

    If everything checks out, YouTube provides base information of the video

  6. Enter the Title and Description of the video.

  7. To upload a Preview Image, browse to the image and select the file.

    note note
    NOTE
    After upload, the preview image that displays is automatically generated by an external video service provider. You cannot edit the image from the Adobe Commerce Admin.

  8. If you prefer to use the video meta data, click Get Video Information.

  9. To determine how the video is used in the store, select the checkbox of each Role that applies:

    • Base Image
    • Small Image
    • Swatch Image
    • Thumbnail
    • Hide from Product Page

  10. When complete, click Save.

    note note
    NOTE
    If the Autostart base video configuration option is set to Yes but the video does not begin to play automatically, it could be due to the autoplay policies that are enforced by the browser and cannot be controlled by Adobe Commerce. Each supported browser has its own autoplay policies that can change over time and your video may not autoplay in the future. As a recommended best practice, you should not rely on autoplay for business critical functionality and should test the video autoplay behavior in your store with each supported browser.

Maintain API access

According to the Google developer Terms and Conditions, YouTube may disable API access for accounts that have been inactive for more than 90 days. This occurrence could result in your videos not displaying. To keep your API access current, use a cron job to ping the API at regular intervals:

30 10 1 * * curl -i -G -e https://yourdomain.com/ -d "part=snippet&maxResults=1&q=test&key=YOUTUBEAPIKEY" https://www.googleapis.com/youtube/v3/search >/dev/null 2>&1

Field reference

Field
Description
URL
The URL of the associated video.
Title
The video title.
Description
The video description.
Preview Image
An uploaded image that is used as a preview of the video in your store.
Get Video Information
Retrieves the video meta data that is stored on the host server. You can use the original data or update it as needed.
Role
Determines how the preview image is used in your store. You can choose any combination of options: Base Image, Small Image, Thumbnail, Swatch Image, Hide from Product Page
recommendation-more-help
af062d56-f22c-4537-813d-bedf8b92a071