How to Add YouTube Videos on Product Pages in Magento 2

10

Magento 2 is an eCommerce platform where you can run your personal online store. Magento 2 provides several features to help you manage your stores according to your requirements.

Adding videos to products is one of the many important features of Magento 2, and using this feature can help you inform your customers about your products in a better way.

This topic is a part of Product Management Series in Magento 2. You can jump on to the other parts here:

 

Hence, in this tutorial, we are going to learn how to integrate videos to products in Magento 2. To do that, we’ll have to follow these steps:

  • Generate a Youtube API Key.
  • Integration of the Youtube API key to Magento 2.
  • Integration of the Youtube Video URL to Product.

Generate YouTube API Key

In order to add Youtube videos to products, you need to generate a Youtube API key. First, login to your Google account and go to Google Developers Console.

You’ll be greeted with the following screen:

Google Developer Console

Click the menu button on the left corner of the page:

Navigate Menu of Google Console

Select API Manager:

Click API Manager

Now you should be on the API library page. Click on Youtube Data API.

Click YouTube Data API

Now Create Project to enable the API.

Click on Create Project Project Creation WindowAdd Project Name

Enable the API as shown below:

Enable API

Once you are on the following screen, go to the Credentials tab.

Go to Credentials Tab of Google Console

Click on Create Credentials.

Create Credentials

Select API key option.

Click API Key

You have finally generate an API key as demonstrated in the image below:

API Key Generated

Integration of Youtube API key to Magento 2

Go to the Admin Panel of your Magento Store and navigate to the Store tab from the left corner of the page. Select Configuration from the options.

Navigate from stores to configuration

Now click on Catalog:

Navigate to Catalog

Go to Product Video section and insert the Youtube API key which we generated in Google Developers Console. Then click on Save Config.

Enter API Key

Integration of Youtube Video URL to Product

Go to the Admin Panel of the Magento Store and navigate to the Products tab. Next, click the Catalog option.

Navigate from product to Catalog

Click on the Edit option of product.

Edit Product

Now go to the Images and Videos section of Product and click on Add Video.

Scroll to Video section of catalog

Enter the Product video URL from Youtube and click on Save.

Enter YouTube Video URL

Now, just click on Save as shown in the image below:

Save the product

Go back to the Product page and you will see the result.

Video Added to Magento 2 product

Final Words

You can use the video feature to attract and convince the customer about the product. By following this tutorial, you’ll be able to add video to products in Magento store easily. If you have a problem or would like to add to the discussion, just leave a comment below.

About Author

Syed Muneeb Ul Hasan is an expert in PHP and Magento, he prefers to educate users in implementing and learning Magento. When not working, he loves to watch cricket.

  • Bob Lei

    Hi there Syed,

    Thanks for your clear article. I’ve tried it but the video doesn’t play. See http://181.224.135.76/~acnew857/default/ticket-rijksmuseum-amsterdam.html.html Any idea on why that might be?

    Thanks!

    Regards, Bob.

    • Hello,

      Thanks for your appreciation. I have checked the URL that you provided and the video is playing.

      • Bob Lei

        Hi Syed,

        Yes, in the text but that’s through a iframe include in the text. The video in the product picture set isn’t playing right? Somehow it also shows 2 pictures of the same (still of the) video.

        Thanks.

        Regards, Bob.

        • May be you are missing any step. Please try again all the steps.

          • Bob Lei

            Good day Syed,

            Did it step by step but still doesn’t work unfortunately… By the way, after having created a project ‘video’ the project was not directly shown top left like in your picture (clickable pictures to be able to better see them would be nice by the way). Had to search for it and select. Only thing done differently from your manual is having created credentials BEFORE enabling the API. Might that be the reason it doesn’t work? I have also attached the video to a different product but same problem (not playing, just showing a still).

            Thanks.

            Regards, Bob

          • Yes, it might be the reason. First enable the API then create credentials as shown in this tutorial

          • Bob Lei

            Bummer. Still doesn’t work. Deleted the project and did it all step by step again.

          • Might be you are facing this issue due to the Magento version.

          • Bob Lei

            I have 2.0.5. Is that version known for such?

  • Nolwennig

    Hi Syed,

    Do you know how to set the video data (urls, name, title, description, etc..) for product via csv files import process?