{"id":1434,"date":"2017-09-23T21:54:10","date_gmt":"2017-09-23T21:54:10","guid":{"rendered":"http:\/\/inchoo.net\/?p=29962"},"modified":"2017-09-23T22:50:38","modified_gmt":"2017-09-23T22:50:38","slug":"adding-videos-to-product-page-in-magento2","status":"publish","type":"post","link":"https:\/\/www.sushilkumar.ind.in\/blog\/magento-2\/adding-videos-to-product-page-in-magento2\/","title":{"rendered":"Adding videos to product page in Magento2"},"content":{"rendered":"<p>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\u2019s 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.<\/p>\n<p>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.<span id=\"more-29962\"><\/span><\/p>\n<ul>\n<li>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.\n<div id=\"attachment_29961\" class=\"wp-caption aligncenter\" style=\"width: 770px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-29961\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2.png\" alt=\"\" width=\"760\" height=\"432\" \/><\/p>\n<p class=\"wp-caption-text\"><em>developers.google.com<\/em><\/p>\n<\/div>\n<\/li>\n<li>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\u00a0API.\n<div id=\"attachment_29960\" class=\"wp-caption aligncenter\" style=\"width: 770px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-29960\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-1.png\" alt=\"\" width=\"760\" height=\"390\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Create new project<\/em><\/p>\n<\/div>\n<\/li>\n<li>You will need to fill up few basic information:\n<div id=\"attachment_29957\" class=\"wp-caption aligncenter\" style=\"width: 534px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-29957\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-2.png\" alt=\"\" width=\"524\" height=\"633\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Project basic information<\/em><\/p>\n<\/div>\n<\/li>\n<li>After hit on Create button you will have option to generate API key:\n<div id=\"attachment_29958\" class=\"wp-caption aligncenter\" style=\"width: 663px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-29958\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-3.png\" alt=\"\" width=\"653\" height=\"605\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Create API key<\/em><\/p>\n<\/div>\n<div id=\"attachment_29959\" class=\"wp-caption aligncenter\" style=\"width: 637px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-29959\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-4.png\" alt=\"\" width=\"627\" height=\"411\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Select API key<\/em><\/p>\n<\/div>\n<\/li>\n<li>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\u00a0which you can add at the bottom. Hit save.\n<div id=\"attachment_29956\" class=\"wp-caption aligncenter\" style=\"width: 663px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-29956\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-5.png\" alt=\"\" width=\"653\" height=\"531\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Restrict key to domain<\/em><\/p>\n<\/div>\n<\/li>\n<li>Ok, great we have now API key. But we need to enable it :-). Go to\u00a0\/\/console.developers.google.com\/apis\/ select in left menu Dashboard and click Enable API\n<div id=\"attachment_29964\" class=\"wp-caption aligncenter\" style=\"width: 770px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-29964\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-6.png\" alt=\"\" width=\"760\" height=\"261\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Enable API<\/em><\/p>\n<\/div>\n<\/li>\n<li>Next thing is to select service, in our case it is Youtube:\n<div id=\"attachment_29965\" class=\"wp-caption aligncenter\" style=\"width: 770px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-29965\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-7.png\" alt=\"\" width=\"760\" height=\"491\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Youtube API<\/em><\/p>\n<\/div>\n<\/li>\n<li>Now the final step is to enable and run API:\n<div id=\"attachment_29966\" class=\"wp-caption aligncenter\" style=\"width: 728px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-29966\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-8.png\" alt=\"\" width=\"718\" height=\"478\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Enable API<\/em><\/p>\n<\/div>\n<\/li>\n<li>At the end, you will get dashboard with all information regarding API usage, and also you can disable API:\n<div id=\"attachment_29967\" class=\"wp-caption aligncenter\" style=\"width: 770px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-29967\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-9.png\" alt=\"\" width=\"760\" height=\"234\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Youtube API dashboard<\/em><\/p>\n<\/div>\n<\/li>\n<li>Next thing is to login in Magento 2 admin. Go to Store -&gt; Configuration -&gt; Catalog -&gt; Catalog -&gt; Product Video.\n<div id=\"attachment_29963\" class=\"wp-caption aligncenter\" style=\"width: 770px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-29963\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-10.png\" alt=\"\" width=\"760\" height=\"297\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Add video API Magento<\/em><\/p>\n<\/div>\n<p>Paste your API key here, hit save. Please note there\u00a0are 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.<\/li>\n<li>Next step is to open product for which we have video. Scroll down to Images and videos, click Add\u00a0Videos.\n<div id=\"attachment_29969\" class=\"wp-caption aligncenter\" style=\"width: 770px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-29969\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-11.png\" alt=\"\" width=\"760\" height=\"172\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Add Video<\/em><\/p>\n<\/div>\n<\/li>\n<li>Next you will copy paste youtube URL, all other data will be populated automatic.\n<div id=\"attachment_29970\" class=\"wp-caption aligncenter\" style=\"width: 770px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-29970\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-12.png\" alt=\"\" width=\"760\" height=\"402\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Information about video<\/em><\/p>\n<\/div>\n<\/li>\n<li>Please update Image preview role, it can be base, small etc.\n<div id=\"attachment_29971\" class=\"wp-caption aligncenter\" style=\"width: 770px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-29971\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-13.png\" alt=\"\" width=\"760\" height=\"349\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Image preview role<\/em><\/p>\n<\/div>\n<\/li>\n<li>Save and you will have video inside media gallery collection.\n<div id=\"attachment_29972\" class=\"wp-caption aligncenter\" style=\"width: 609px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-29972\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-14.png\" alt=\"\" width=\"599\" height=\"384\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Media Gallery<\/em><\/p>\n<\/div>\n<\/li>\n<li>Save product and go to product detail page on frontend.\n<div id=\"attachment_29973\" class=\"wp-caption aligncenter\" style=\"width: 770px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-29973\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-15.png\" alt=\"\" width=\"760\" height=\"484\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Category page listing<\/em><\/p>\n<\/div>\n<\/li>\n<li>On product detail page we will have image thumbnail for video, click play and there you go.\n<div id=\"attachment_29974\" class=\"wp-caption aligncenter\" style=\"width: 763px;\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-29974\" src=\"\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2-16.png\" alt=\"\" width=\"753\" height=\"745\" \/><\/p>\n<p class=\"wp-caption-text\"><em>Product detail video<\/em><\/p>\n<\/div>\n<\/li>\n<\/ul>\n<p>As for vimeo video things are\u00a0simpler. Just paste video URL, edit description and hit save.<\/p>\n<p>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.<\/p>\n<p>The post Adding videos to product page in Magento2 appeared first on Sushil Kumar.<\/p>\n<p><a href=\"\/\/www.sushilkumar.ind.in\/custome-devlopment\/\">Do you need any custome Development Click here and fill the form with full your requirement<\/a> and after i will send the quotes of your work requirements.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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,&#8230;<br \/>\nThe post Adding videos to product page in Magento2 appeared first on Inchoo. 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&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":1435,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[255,256,225,20,167,279,280],"tags":[259,260,230,22,168,281,282],"class_list":["post-1434","post","type-post","status-publish","format-standard","has-post-thumbnail","","category-administration","category-configuration","category-frontend","category-magento-2","category-products","category-video","category-walktrough","tag-administration","tag-configuration","tag-frontend","tag-magento-2","tag-products","tag-video","tag-walktrough"],"jetpack_publicize_connections":[],"acf":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-content\/uploads\/2017\/09\/adding-videos-to-product-page-in-magento2.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p99pkJ-n8","_links":{"self":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/1434"}],"collection":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/comments?post=1434"}],"version-history":[{"count":0,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/posts\/1434\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/media\/1435"}],"wp:attachment":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/media?parent=1434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/categories?post=1434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/tags?post=1434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}