Today is even impossible to imagine a good product detail page without product video/s. In Magento 2, adding videos to the product details page is quite easy. The major problem is in most cases with an initial setup. Most of the product videos already exist online, either on youtube.com or vimeo.com. In the first case, it’s the most popular video publishing platform and for vimeo.com we can say it is more or less dedicated to professionals and photo/video enthusiast.
Google, company behind youtube, set few rules regarding sharing and embedding videos to other domains, in our case our online store. They require to have enabled youtube API key if you want to use embedding youtube videos beyond simple grabbing embed code from youtube videos page.
- In Magneto 2 first step is to configure youtube API key under settings. So first we go and enable google API key for youtube videos. https://developers.google.com/youtube/registering_an_application.
- You will get a window with option to create new project or you can add it to existing if you have already created project with google API.
- You will need to fill up few basic information:
- After hit on Create button you will have option to generate API key:
- Please note here is one important option to consider, Restrict key, please go with this option and restrict usage of this key only to specific domain. You can update API key name, restrict only to specific domain which you can add at the bottom. Hit save.
- Ok, great we have now API key. But we need to enable it :-). Go to https://console.developers.google.com/apis/ select in left menu Dashboard and click Enable API
- Next thing is to select service, in our case it is Youtube:
- Now the final step is to enable and run API:
- At the end, you will get dashboard with all information regarding API usage, and also you can disable API:
- Next thing is to login in Magento 2 admin. Go to Store -> Configuration -> Catalog -> Catalog -> Product Video.
Paste your API key here, hit save. Please note there are few additional options in general. You can set if the video is base (switching order of gallery images and set to video be first one in line) it will autoplay, after video is finished load related videos, replay video. We will keep it on NO. Save and clear cache.
- Next step is to open product for which we have video. Scroll down to Images and videos, click Add Videos.
- Next you will copy paste youtube URL, all other data will be populated automatic.
- Please update Image preview role, it can be base, small etc.
- Save and you will have video inside media gallery collection.
- Save product and go to product detail page on frontend.
- On product detail page we will have image thumbnail for video, click play and there you go.
As for vimeo video things are simpler. Just paste video URL, edit description and hit save.
I hope this short walkthrough will help you to master adding and editing Magento 2 media gallery, adding new media rich content to product details page.