As I briefly mentioned in my blog post "An Overview Of Admin Changes In Magento 2", Magento have introduced a way to add videos to product pages. Adding a Vimeo video is straight forward enough, as all you need to do is paste the video Url into the relevant field in the product detail view within the admin. Adding a YouTube video is slightly more complicated though! In this brief article I'm going to explain how to do just that.
Step 1: Get hold of your YouTube API Key
For security reasons, Magento will only let you upload YouTube videos which are associated to your account. In other words, you're not able to browse YouTube and add any random video to your product pages!
This guide assumes you already have a YouTube account – but if you don't, you can create an account and upload videos here.
- Start by logging into your Google Dev Console (As YouTube is owned by Google you will be able to login by using your YouTube credentials).
- Once logged in, go to Overview > Google APIs > Popular APIs > YouTube APIs > YouTube Data API.
- In the left hand navigation click on Credentials, followed by Create credentials and finally API Key. This will trigger a pop-up window, click on Server Key and enter a name i.e Mage 2 Test and then press Create.
- Copy your new API Key.
Step 2: Configure Magento to work with your YouTube account
Once you've got hold of your YouTube API Key, login to your Magento 2 site admin and do the following:
- Go to Stores > Settings > Configuration. Once on the configuration page continue to Catalog > Catalog and finally select Product Video where you will be able to paste your YouTube API Key into the YouTube API Key field.
- Press Save Config and remember to clear the caches.
Step 3: Add a video to a product page
Now that your YouTube account has been activated in Magento, you're ready to start adding videos to your product pages.
- Go to a Product Detail page.
- On the Product Details tab click on Add Video.
- Paste your YouTube video URL (Hint: You can literally copy and paste the address that's in your web browser).
- Enter a Title and Description for your video.
- If you wish to upload a preview image, you can do so by clicking on the Preview Image button, upload an image and then click Save.
- Select the Role i.e Base Image and press Save. In our example we would like our video to be the Base Image, meaning that the video will become the default media to be displayed on the frontend of the website (instead of an image).
Your video has now been added to your product and will be viewable on the product detail page.