I'm looking for a solution to move the video to the first position in left gallery in product page WITHOUT changing from admin.
enter image description here I've set the video in 3rd position, but I want the video should in the 1st position.
The result will look like this: enter image description here

I've custom some in function setData() from fotorama.js, i've create datanew, then i load data, and check if its a video or not, then move video to top by using "unshift", then assign data = datanew:

    // other code

    function setData() {
        data = that.data = data || clone(opts.data) || getDataFromHtml($fotorama);
        size = that.size = data.length;

        ready.ok && opts.shuffle && shuffle(data);

        var datanew = [];
        for (var i = 0; i < data.length; i++) {
            if (data[i].type == 'video') {
            } else {
        data = datanew;


        activeIndex = limitIndex(activeIndex);

        size && appendElements(true);

    // other code

But most of the time, its doesn't show the play video button and video thumb icon.
Other time, it shows both thumb icon in the image as well (which I don't want to). enter image description here

I'm following @Dhiren Vasoya solution, and its almost work, but the content in the right is not video, its image. enter image description here

Here are the code that i've custom in Gallery.php

public function getGalleryImagesJson()
    $imagesItems = [];
    $n = 1;
    /** @var DataObject $image */
    foreach ($this->getGalleryImages() as $image) {
        $position = $image->getData('position') + 1;
        if ($image->getMediaType() == 'external-video') {
            $isMain = true;
            $position = $n;
        } else {
            $isMain = false;
        $imageItem = new DataObject([
            'thumb' => $image->getData('small_image_url'),
            'img' => $image->getData('medium_image_url'),
            'full' => $image->getData('large_image_url'),
            'caption' => ($image->getLabel() ?: $this->getProduct()->getName()),
            'position' => $position,
            'isMain'   => $isMain,
            'type' => str_replace('external-', '', $image->getMediaType()),
            'videoUrl' => $image->getVideoUrl(),
        foreach ($this->getGalleryImagesConfig()->getItems() as $imageConfig) {
        if ($image->getMediaType() == 'external-video') {
            array_unshift($imagesItems, $imageItem->toArray());
        } else {
            $imagesItems[] = $imageItem->toArray();

        // $imagesItems[] = $imageItem->toArray();
    if (empty($imagesItems)) {
        $imagesItems[] = [
            'thumb' => $this->_imageHelper->getDefaultPlaceholderUrl('thumbnail'),
            'img' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
            'full' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
            'caption' => '',
            'position' => '0',
            'isMain' => true,
            'type' => 'image',
            'videoUrl' => null,

    return json_encode($imagesItems);

For your requirement you need to to do this things.

  1. create di.xml file into your custom extension.


<?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="Magento\Catalog\Block\Product\View\Gallery">
        <plugin name="vendor_extension_block_catalog_product_view_gallery"
  1. Now create that block file.


namespace Vendor\Extension\Block\Catalog\Product\View;

use Magento\Framework\Json\EncoderInterface;

class Gallery extends \Magento\Catalog\Block\Product\View\Gallery
    protected $jsonEncoder;

    public function __construct(
        \Magento\Catalog\Block\Product\Context $context,
        \Magento\Framework\Stdlib\ArrayUtils $arrayUtils,
        EncoderInterface $jsonEncoder,
        array $data = []
    ) {
        $this->jsonEncoder = $jsonEncoder;
        parent::__construct($context, $arrayUtils, $jsonEncoder);

    public function aftergetGalleryImagesJson($subject, $result){


        $result = json_encode($result);        
        return $result;
| improve this answer | |
  • I've try this way, and its almost work. The thing that doesn't work here is its only change the thumbnail image in the left. The content in the right is not video, its image. Please help – fudu Aug 16 '19 at 7:11
  • I've update the image i take in the post in case you wanna see it – fudu Aug 16 '19 at 7:20
  • What login you apply here to change the video into first position? – Dhiren Vasoya Aug 16 '19 at 9:28
  • You mean what code did i custom to make this work? I've update in the post. Please take a look up there. – fudu Aug 16 '19 at 9:45
  • I mean after follow my answer, as I write comment that you need to do your logic here. into that what code you have done? I am talking about this file : Vendor\Extension\Block\Catalog\Product\View\Gallery.pho – Dhiren Vasoya Aug 16 '19 at 10:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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