I have requirements that, need to create custom module that upload the video from back end and this video can show on frontend product view page in product gallery and product image view..

Now I have created backend functionality for for upload video and save it, But now I'm confused that how to show that video in product view page?

I know that, magento 2 has already give this kind of functionality but, I need to create custom module for that.. So

Please help on this. i need to learn this.

enter image description here

Thanks in advanced..

I have tried the below code:in phtml file is this proper way to do this?

    require(['jquery'], function ($) {
        $(document).on('gallery:loaded', function () {
            var $fotorama = jQuery('div.gallery-placeholder > div.fotorama');
            var fotorama = $fotorama.data('fotorama');
            $fotorama.on('fotorama:load', function fotorama_onLoad(e, fotorama, extra) {
                if (extra.frame.type === 'iframe') {
                    extra.frame.$stageFrame.html('<iframe align="middle" type="text/html" width="100%" height="100%" src="' + extra.frame.src + '" frameborder="0" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>');
                thumb: 'https://xyz.site/magento/pub/media/catalog/product/cache/7c1a038fa759ec7e45c93a176a358e24/w/g/wg03-gr-0.jpg',
                'src': '<?php echo $videoFile; ?>',
                type: 'iframe',
                caption: '<set your caption>'
  • Magento has this feature as default Commented Mar 7, 2022 at 9:11
  • @AmiyoGhosh yes i know but i want to add in a custom module, how can Iadd that? Commented Mar 7, 2022 at 9:15
  • which files i need to override in my module Commented Mar 8, 2022 at 9:44
  • Please developer's. Help me with this.. Commented Mar 9, 2022 at 1:33

2 Answers 2


Please copy vendor/magento/module-catalog/view/frontend/templates/product/list.phtml to your custom theme. app/design/frontend/package/theme/Magento_Catalog/templates/product/list.phtml

$video = false;
$galleryImages = $this->helper('Your\Module\Helper\Data')->getMediaGalleryImages($_product);
if ($galleryImages) {
    foreach ($galleryImages as $primage) {
        $imageData = $primage->getData();
        // Check media type
        if (isset($imageData['media_type']) && $imageData['media_type'] == 'external-video') {
            $video = true;
            if (strpos($imageData['video_url'], 'youtube.com') !== false) {
                echo preg_replace("/\s*[a-zA-Z\/\/:\.]*youtube.com\/watch\?v=([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i","<iframe width=\"240\" height=\"300\" src=\"//www.youtube.com/embed/$1\" frameborder=\"0\" allowfullscreen></iframe>", $imageData['video_url']);
            }elseif(strpos($imageData['video_url'], 'vimeo.com') !== false){
                echo "<iframe width=\"240\" height=\"300\" src=".$imageData['video_url']." frameborder=\"0\" allowfullscreen></iframe>";

<?php if(!$video){ ?>
    <?= $productImage->toHtml() ?>
<?php } ?>

To show a video in the product view page in Magento 2, you can follow these steps:

  1. First, upload the video file to your server or a third-party video hosting service such as YouTube or Vimeo.

  2. Edit the product in the Magento 2 admin panel and go to the "Images and Videos" tab.

  3. Click the "Add Video" button and select the video provider from the dropdown menu. If you uploaded the video to your server, you can select "Custom Video". If you uploaded the video to a third-party hosting service, you can select the appropriate provider (e.g. YouTube or Vimeo) and enter the video ID or URL.

  4. Enter a title and description for the video, and select the thumbnail image.

  5. Save the product.

  6. In the product view page template file (catalog_product_view.xml), add the following code in the appropriate location where you want the video to appear:

enter image description here

Replace [VIDEO_URL], [VIDEO_TITLE], [VIDEO_DESCRIPTION], and [THUMBNAIL_URL] with the appropriate values for your video.

  1. Clear the Magento cache to see the changes on the front end.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.