How to show video in product view page front end?

Question

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.

Thanks in advanced..

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

<script>
    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>');
                }
            });
            fotorama.push({
                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>'
            });
        });
    });
</script>

Answer 1

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

<?php
$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 } ?>

Answer 2

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:

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

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