How to Add a Product Video in Magento 2

How-to-Add-a-Product-Video-in-Magento-2

There are three main ways to add a product video in Magento 2:

  1. embedding a YouTube video
  2. embedding a Vimeo video
  3. uploading a video to your server

Several users have reported problems embedding a Vimeo video in the product gallery since Vimeo deprecated Simple API. Additionally, uploading a video to the file server is a complicated procedure that requires accessing the server.

Therefore, we’ll show you how to embed a YouTube video in the Magento 2 product gallery as it’s by far the best and easiest method. For this guide, we will use Magento 2.4.1, although these steps will work for other versions of Magento 2.

Step 1: Generate YouTube API key

To add a YouTube video on Magento, you’ll need to create a YouTube Data API key inside Google Developers Console. This step will allow you to integrate the YouTube video inside the Magento product gallery.

  1. Log in to your Google account and go to the Google Developers Console. You’ll see the following dashboard on your screen.

    Google Developers Console
    Google Developers Console dashboard
  2. Go to the Navigation Menu on the top-left side and navigate to APIs and services > Library to access the “API library.”

    Library in APIs and services
    Select Library under APIs and services in the Navigation Menu.

    Google will automatically assign a default project to organize the Google Cloud resources in your account. You can create a new project by clicking on Select a Project > New Project and adding your Project Name and Location. Alternatively, you can continue with the default selection.

    Select a Project
    Click on Select a Project in the API Library.
  3. Once you’re in the “API Library,” scroll down to the YouTube section and click on YouTube Data APIv3.
    Alternatively, you can search for YouTube Data APIv3 in the search box.

    YouTube Data APIv3
    Select YouTube Data APIv3 in the API Library.
  4. After you’re redirected to the “YouTube Data API” page, click Enable.

    Click Enable
    Click Enable in YouTube Data API v3
  5. Select Credentials on the left panel.

    Click Credentials
    Click the Credentials button.
  6. Click Create Credentials at the top and select the API key from the dropdown.
    If you already have the API keys generated, copy the key from the API keys table and jump to Step 2 directly.

    Select API key from Create Credentials
    Select API key from Create Credentials.
  7. You’ll see a pop-up with a new API key generated. Copy the API key and close the pop-up.

    Generated API key
    Copy the newly generated API key.
  8. If you want to control which applications can use the API key, click on the Edit icon beside the Trash Bin icon, set application and API restrictions, and click Save.

    Edit icon
    Click Edit icon to set application and API restrictions.

Step 2: Configure the API key in Magento 2

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

    Configuration in Settings
    Go to Stores > Settings > Configuration in the Magento admin panel.
  2. Expand Catalog in the left panel and then select Catalog underneath it.

    Catalog in Catalog section
    Select Catalog in Catalog section.
  3. Click on the Product Video section to expand it and insert the YouTube API key copied from the “Google Developers Console.

    Youtube API key in Product Video
    Paste the Youtube API key in the Product Video section.
  4. Click the orange Save Config button on the top right corner.

    Save Config in Catalog
    Click Save Config after pasting the API key.

Step 3: Add video link to the product

  1. On the Magento Admin Panel, go to Catalog > Products.

    Products in Catalog
    Select Products > Catalog from the admin panel.
  2. Find the product you want the video to and click Edit under the Action column.

    Edit under the Action column
    Click Edit under the Action column.
  3. Scroll down to the Images and Videos section and click on Add Video.

    Add Video in Images and Videos
    Click Add Video in the Images and Videos section.
  4. Enter the URL of the YouTube video.

    URL link
    Paste the URL link in New Video.
  5. Add other details like Title and Description.
  6. Upload a Preview Image by browsing through the available files. 
  7. If you want video metadata, i.e., information about the video such as author, date created, uploader, title, and description, click on Get Video Information.

    Get Video Information button
    Click on the Get Video Information button for video metadata.
  8. Tick all the checkboxes in the Role section. You’ve now assigned the following “roles” to the video:
  1. Once you’ve entered all the details, click Save on the top right side.

    Save new video
    Click Save to save the new video.

You’ve now successfully integrated a product video in Magento 2. You should see the video on the product page. Refresh the Magento cache to reflect the new changes if you can’t see the frontend video.

Product Video in Gallery
Product Video in Magento frontend Gallery

Leave a comment