Adding videos to product page in Magento2

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. https://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 https://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.

Related Inchoo Services

You made it all the way down here so you must have enjoyed this post! You may also like:

Moving the validation error message, this time globally Danijel Vrgoc
, | 0

Moving the validation error message, this time globally

How to set up taxes in Magento 2 Toni Anicic
Toni Anicic, | 1

How to set up taxes in Magento 2

Bypassing Magento 2 layout update restrictions in Admin Adrian Bece
Adrian Bece, | 2

Bypassing Magento 2 layout update restrictions in Admin

4 comments

  1. Hi,
    I am new to Magento2 and was exploring the features of an older version 2.0.2. When I tried to edit a product in admin and entered a video link from youtube under URL, after focus out all the details were populated automatically into other sections like Title, Description, Preview Image etc but while clicking on save it always through an error like Could not get preview image information. Please check your connection and try again..
    I tried different URLs also but got the same error even I tried downloading the video and uploaded that to Vimeo and then entered that vimeo URL but still the same error.
    I didn’t do any customizations, all are default things, I just edited the product to see how the video look like on frontend?
    Can you please help me out?

    Thanks,
    Vishal

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.