[Solved] Product Video Not Working on Frontend in Magento 2

Hi, welcome back. Before we start, make sure you have correctly configured the product YouTube video using the instructions provided in this Article. If you have successfully set up the YouTube API and configured the Magento catalog product video, but are not seeing the video on the Magento 2 frontend product detail page or encountering any errors, then this article is for you. We will explore the common causes behind this issue and provide step-by-step solutions to ensure your product videos function seamlessly.

Solution 1 :-

1. Open this file in your theme: –app/design/frontend/[vendor]/[theme]/Magento_Catalog/layout/catalog_product_view.xml
2. In the catalog_product_view.xml file, search for product.info.media container.
3. Add below code under product.info.media container.

<block class="Magento\ProductVideo\Block\Product\View\Gallery" name="product.info.media.video" after="product.info.media.image" template="product/view/gallery.phtml"/>

4. After adding that code your catalog_product_view.xml file will look like this :-

 <container name="product.info.media" htmlTag="div" htmlClass="product media" after="product.info.main">
   <block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="Magento_Catalog::product/view/gallery.phtml"/>
   <block class="Magento\ProductVideo\Block\Product\View\Gallery"   name="product.info.media.video" after="product.info.media.image" template="product/view/gallery.phtml"/>

That’s it Now you will be able to see video on Frontend product page.

Solution 2 (not recommended):-

After trying all the solutions, if you still can’t view the product video on the frontend, you can attempt this custom code. However, please keep in mind that this is not recommended. It’s always better to adhere to Magento’s coding standards and procedures.

Path: app/design/frontend/[vendor]/[theme]/Magento_Catalog/templates/product/view/gallery.phtml

$galleryImages = $this->getGalleryImages();
$_product = $this->getProduct();

<?php foreach ($galleryImages as $image) : ?>
        <?php if ($image->getData('media_type') === 'external-video') : ?>
            <?php
            $videoUrl = $image->getData('video_url');
            parse_str(parse_url($videoUrl, PHP_URL_QUERY), $videoParameters);
            $videoId = $videoParameters['v'];
            $embedUrl = 'https://www.youtube.com/embed/' . $videoId;
            ?>
            <li>
                <iframe width="560" height="315" src="<?= $embedUrl ?>" title="<?= $_product->getName() ?>" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </li>
        <?php else : ?>
            <li>
                <a href="javascript:;" class="product-image desk-prod-img">
                    <img style="width: auto;" class="lazyload" data-src="<?= $image->getData('medium_image_url') ?>"
                         src="<?= $image->getData('medium_image_url') ?>"
                         alt="<?= $_product->getName() ?>" />
                </a>
            </li>
        <?php endif; ?>
    <?php endforeach; ?>

Adjust the above code according to your requirements.

Do you have any questions or concerns about this solution?

If yes, kindly share them in the comments section below. I’m here to assist you 😊

Thank you!