Adding videos to product page in Magento2

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. //developers.google.com/youtube/registering_an_application.

  

  developers.google.com

• 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.

  

  Create new project

• You will need to fill up few basic information:

  

  Project basic information

• After hit on Create button you will have option to generate API key:

  

  Create API key

  

  Select 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.

  

  Restrict key to domain

• Ok, great we have now API key. But we need to enable it :-). Go to //console.developers.google.com/apis/ select in left menu Dashboard and click Enable API

  

  Enable API

• Next thing is to select service, in our case it is Youtube:

  

  Youtube API

• Now the final step is to enable and run API:

  

  Enable API

• At the end, you will get dashboard with all information regarding API usage, and also you can disable API:

  

  Youtube API dashboard

• Next thing is to login in Magento 2 admin. Go to Store -> Configuration -> Catalog -> Catalog -> Product Video.

  

  Add video API Magento

  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.

  

  Add Video

• Next you will copy paste youtube URL, all other data will be populated automatic.

  

  Information about video

• Please update Image preview role, it can be base, small etc.

  

  Image preview role

• Save and you will have video inside media gallery collection.

  

  Media Gallery

• Save product and go to product detail page on frontend.

  

  Category page listing

• On product detail page we will have image thumbnail for video, click play and there you go.

  

  Product detail video

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.

The post Adding videos to product page in Magento2 appeared first on Sushil Kumar.

Do you need any custome Development Click here and fill the form with full your requirement and after i will send the quotes of your work requirements.