Reading list Switch to dark mode

    Product Video for Magento 2

    Updated 28 March 2024

    Introduction

    Video Player Extension for Magento 2(Adobe Commerce) module allows the admin to upload product video directly, which is further displayed on the product page.

    The admin can add multiple videos and can also customize the video player’s appearance.

    Adding video to the product page enhances the better outreach of your product to the customer.

    Furthermore, there is no barrier with this module as it works for all types of products (ie. Simple Product, Configurable Product, Virtual Product, Grouped Product, Bundle Product, Downloadable products).

    Note- The video upload size depends on upload_max_filesize in phpconfig.

    Start your headless eCommerce
    now.
    Find out More

    Additionally, you can use our Magento 2 TV app for various video streaming directly on TV.

    Check the working of the plugin in the video mentioned below –

    kyaXxBP0M-Y

    Features of Product Video for Magento 2(Adobe Commerce Cloud)

    • The admin can enable/disable the module.
    • The Admin can upload mp4 and WebM videos on the product page.
    • Mass video upload feature with feature image upload as well.
    • The admin can set a preview image for the video.
    • The Admin can set video player appearance (ie. Primary color & Player options).
    • The Customer can see the product with better visibility.
    • The admin can configure settings for the video player.
    • The admin can upload the product video.
    • YouTube/Vimeo/CDN video URLs are also supported.
    • The module is compatible with the Hyva theme.

    Install Extension from Webkul Store

    #1 Download Module

    Firstly, you need to log in to Webkul Store, go to My Account>My Purchased Products section, verify and then download and extract the contents of this zip folder on the system.

    #2 Upload Folder

    Once the module zip is extracted, follow path src>app and then copy the app folder into the Magento 2 root directory on the server as shown below:

    installation-Product Video for Magento 2

    #3 Run Commands

    After uploading the module folder, you need to run the following commands in the Magento 2 root directory:

    • php bin/magento setup:upgrade
    • php bin/magento setup:di:compile
    • php bin/magento setup:static-content:deploy
    • php bin/magento indexer:reindex
    • php bin/magento cache:flush

    Install Extension from Magento Marketplace

    If you have purchased this extension from the Magento (Adobe Commerce)Marketplace then please follow the below process or visit this link.

    #1 Get Access Keys

    You need to get access keys, navigate to My Profile in Magento Marketplace, then choose Access Keys in the My Products section.

    my-profile

    Go to Magento 2 and then you need to copy both the Access Keys – Public Key and Private Key. These access keys will be needed in the next steps for authentication.

    copy-keys

    If access keys are not created earlier, click Create A New Access Key, enter any name and click OK.

    create-key-name

    #2 Update composer.json File

    To know the component name and version number, go to your Magento Marketplace account section, My Profile>My Purchases, then find this extension to view the details. Please note – Below is an example image, every extension will have its unique component name and version.

    know-component-name-version

    After that, navigate to your Magento project directory and update your composer.json file in the following format.

    composer require <component-name>:<version>

    For example, to install version 5.0.0 of this extension you need to run the following command:

    composer require webkul/module-videoplayer:5.0.0

    #3 Enter Access Keys

    Now you will need to enter the Access Keys that you obtained as explained in the first step #1 Get Access Keys. Wait for Composer to finish updating your project dependencies and make sure there aren’t any errors.

    #4 Run Command

    You need to run the following commands:

    • php bin/magento setup:upgrade
    • php bin/magento setup:di:compile
    • php bin/magento setup:static-content:deploy
    • php bin/magento indexer:reindex
    • php bin/magento cache:flush

    Configuration For Multi-Lingual Support

    For multilingual support, the admin will navigate through Store->Configuration->General ->Locale Options and select the locale as German (the language into which the admin wants to translate his store content).

    Google-Translate-lang1


    Language Translation

    If you need to do the Magento 2Video Player module translation, please navigate the following path in your system. app/code/Webkul/ProductVideo/i18n. Open the file named en_US.CSV for editing as shown in the below screenshot.

    language-Translation-Magento2-Canada-Post-Shipping

    Once you have opened the file for editing. Replace the words after the comma(,) on the right with your translated words.

    product-video-img Product Video for Magento 2

    After editing the CSV file, save it and then upload it to the same folder. Now your Magento 2 Video Player module translation is complete.

    language-Translation-Magento2-Canada-Post-Shipping

    Admin Configuration

    After the successful installation of the  Product Video for the Magento 2 module, the admin will be able to see the configuration panel under Stores>Configuration>Webkul>Video Player.

    Conf-Product Video for Magento 2

    Under Video Player Configuration, the admin can modify settings as per the choice.

    • Module Enable- The admin can enable/ disable the module.
    • Video Auto Play- Here, the admin can set the video to be played by the customer with a single click.
    • Loop Video- The video can be looped by selecting Yes in the loop video.

    Video Player Appearance

    • Primary Color- The admin can select the color which they want to use for their video player.
    • Player Options- The admin can choose the options which they want to enable in their video player ie.
      Play Large, Mute, Volume, and Fullscreen.

    After modifying all the changes as per the choice, the admin will click on Save Config to apply changes.

    Admin End Product Video

    To add a video to the product, the admin will navigate to Catalog>Products.

    Admin end productg video-Product Video for Magento 2

    Here, the admin will have to select the product to which they want to add the video. and click on Edit.

    Image and videos-Product Video for Magento 2

    Under Images And Videos, the admin will click on Add video, a slider will appear to add the video for the product.

    Add Video-Product Video for Magento 2
    • Video Source– The admin will choose the video source by which they want to add the video ie. Upload.
    • Upload Video- The admin will choose the video that they want to upload.
    • Title- Here, the admin can select the title which they want to display for the video.
    • Description– The admin can add a description for the video.
    • Preview Image- The admin needs to upload a preview image which will be displayed on the video.
    • Role- Here, the admin can select the role as per the choice.

    After this, the admin will click on Save to apply changes.

    Note- The admin can also select video source as Video URL from the dropdown.

    video-url- Product Video for Magento 2

    Here, in the below snapshot, you can see the admin has selected the video source as the video URL. The video extension supports video URLs of YouTube, Vimeo, and CDN videos as well.

    192.168.15.102_kunalEE246_pub_admin_catalog_product_new_set_4_type_simple_key_cc72a42eadd4d66f8b2b6ca813a0d7b995017eb8fd58884df5364d8ad1410a11_asd

    In the above example, we can see that we have used the CDN video URL and after saving the product the video is visible on the product page as well.

    192.168.15.102_kunalEE246_pub_strawberry-box.htmlasd

    Similarly, below we have added the youtube video URL for the same product.

    192.168.15.102_kunalEE246_pub_admin_catalog_product_edit_id_9_key_1f1fc6e6aae5ebeb233de437bf7ce5c74e2723fd3ebf4aca01ff19645b8768e1_asd

    Now, the YouTube video plays on the product page as shown below in the snapshot.

    192.168.15.102_kunalEE246_pub_strawberry-box.htmlasd-1

    Also, if we add the Vimeo video URL to the product as per the snapshot below.

    192.168.15.102_kunalEE246_pub_admin_catalog_product_edit_id_9_set_4_key_1f1fc6e6aae5ebeb233de437bf7ce5c74e2723fd3ebf4aca01ff19645b8768e1_type_simple_store_0_back_edit_asd

    The Vimeo video can be played on the product page by the users of your website.

    192.168.15.102_kunalEE246_pub_strawberry-box.htmlasd-2

    How to Add a Youtube API key

    If you want to use video URL functionality or want to upload videos to YouTube, the admin must add a YouTube API Key. To do so

    Navigate to Store > Configuration > Catalog> Product Video > YouTube API Key.

    850165

    User Front-End View

    On the front end, the video will be displayed on the product along with the added images. The customer can play the video accordingly without redirecting to a third-party link.

    Front view-Product Video for Magento 2

    Here, the customer can see the product video which is uploaded by the admin and helps them to understand the product well.

    That’s all for the  Product Video for Magento 2(Adobe Commerce Cloud) module still have any issues feel free to add a ticket and let us know your views to make the module better http://webkul.uvdesk.com/

    Current Product Version - 5.0.3

    Supported Framework Version - Magento, 2.0.x , 2.1.x, 2.2.x, 2.3.x, 2.4.x

    . . .

    Leave a Comment

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


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home