Magento Question posted in
The official documentation can be found here.

Add custom video at Fotorama – Magento 2 Product Page

I am trying to add a custom video to Fotorama slider at Product Page that I have uploaded at the storage of my server on this path: pub/media/videos.

I have already tried this code, but didn’t work as I expected…

<script type="text/javascript">
    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: 'pub/media/videos/product/video1.mp4',
                'src': 'pub/media/videos/product/video1.mp4',
                type: 'iframe',
                caption: '<set your caption>'
            });
        });
    });
</script>
Tags:

2

Answers


  1. 0

    I made a fork of fotorama files with an easy usage of HTML5 videos. Here is a functional example of how to use my update. This is only functional for MP4 videos. I modified Fotorama js for this situation that I also face before.

    For more information, and README file, you can check it in GitHub.

    $('.fotorama').fotorama();
    <html>
<head>
  <link href="https://cdn.jsdelivr.net/gh/megacarlossm/fotorama-mcsms/fotorama-mcsm.min.css" rel="stylesheet"/>
</head>

<body>

  <div class="fotorama" data-width="100%" data-maxheight="150px" data-nav="thumbs" data-allowfullscreen="true" data-loop="true" data-arrows="always" data-click="true" data-shadows="true">
  
    <a data-thumb="https://us.123rf.com/450wm/tihiychelovek/tihiychelovek1907/tihiychelovek190700099/130611355-cobweb-on-a-dark-background-dark-background.jpg?ver=6" href="http://techslides.com/demos/sample-videos/small.mp4" data-type="video/mp4"></a>
    
    <a data-thumb="https://i.pinimg.com/564x/1c/bb/66/1cbb664a37bcb91ecbe40fae5ec07e11.jpg" href="https://www.prontus.cl/prontusPlayer4/samples/video/PIPER_SHORT_FILM_720p.mp4" data-type="video/mp4"></a>
    
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/megacarlossm/fotorama-mcsms/fotorama-mcsm.min.js"></script>
</body>
    Login or Signup to reply.
  2. 0

    Adding via JavaScript

    let video = {
    thumbnail: thumbnail,
    url: url
};
$.when(getGallery()).then(function (result) {
    result.fotorama.data.push({
        videoUrl: video.url,
        src: video.url,
        img: video.thumbnail,
        isMain: false,
        thumb: video.thumbnail,
        type: 'video'
    });
}, function (error) {
        console.log(error);
});
getGallery: function () {
    let dfd = $.Deferred();
    let timer = setInterval(function () {
        let gallery = $('[data-gallery-role=gallery-placeholder]').data('gallery');
        if (typeof gallery != 'undefined') {
            clearInterval(timer);
            dfd.resolve(gallery);
        }
    }, 500);
    return dfd.promise();
}

    Adding via module with PHP

    File app/code/My/Module/etc/di.xml

    <?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="MagentoCatalogBlockProductViewGallery">
        <plugin name="insertProductVideo" type="MyModulePluginGalleryGallery" sortOrder="5"/>
    </type>
</config>

    File app/code/My/Module/Plugin/Gallery/Gallery.php

    <?php
namespace MyModulePluginGallery;
class Gallery
{
    public function afterGetGalleryImagesJson(ImageGallery $subject, $result)
    {
$product = $subject->getProduct();
if ($product->getVideoPath()) {
        $imagesSettings = Zend_Json::decode($result);
        $imagesSettings[] = [
                'caption' => '',
        'position' => count($imagesSettings) -1,
        'isMain' => false,
        'type' => 'video',
        'videoUrl' => $product->getVideoPath(), // path to product video like /pub/media/video/800x800_8bit_MP4_H264_quality50.mp4
        'src' => $product->getVideoPath(), // path to product video like /pub/media/video/800x800_8bit_MP4_H264_quality50.mp4
        'img' => $product->getPlaceholder(), // path to video placeholder image like /pub/media/placeholder/800x800_placeholder.png
        'thumb' => $product->getPlaceholder(), // path to video placeholder image like /pub/media/placeholder/800x800_placeholder.png
        ];
        $result = Zend_Json::encode($imagesSettings);
        }
return $result;
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search