There are three main ways to add a product video in Magento 2:
- embedding a YouTube video
- embedding a Vimeo video
- 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.
- Log in to your Google account and go to the Google Developers Console. You’ll see the following dashboard on your screen.
- Go to the Navigation Menu on the top-left side and navigate to APIs and services > Library to access the “API library.”
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.
- 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.
- After you’re redirected to the “YouTube Data API” page, click Enable.
- Select Credentials on the left panel.
- 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.
- You’ll see a pop-up with a new API key generated. Copy the API key and close the pop-up.
- 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.
Step 2: Configure the API key in Magento 2
- On the Magento Admin Panel, go to Stores > Settings > Configuration.
Go to Stores > Settings > Configuration in the Magento admin panel. - Expand Catalog in the left panel and then select Catalog underneath it.
- Click on the Product Video section to expand it and insert the YouTube API key copied from the “Google Developers Console.
- Click the orange Save Config button on the top right corner.
Step 3: Add video link to the product
- On the Magento Admin Panel, go to Catalog > Products.
- Find the product you want the video to and click Edit under the Action column.
- Scroll down to the Images and Videos section and click on Add Video.
- Enter the URL of the YouTube video.
- Add other details like Title and Description.
- Upload a Preview Image by browsing through the available files.
- 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.
Click on the Get Video Information button for video metadata. - Tick all the checkboxes in the Role section. You’ve now assigned the following “roles” to the video:
- Base Image
- Small Image
- Swatch Image
- Thumbnail
- Hide from Product Page
- Once you’ve entered all the details, click Save on the top right side.
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.