Magento 2: How to change video to first position in product page

Question

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

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') {
                datanew.unshift(data[i]);
            } else {
                datanew.push(data[i]);
            }
        }
        data = datanew;

        checkForVideo();

        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).

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

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;
            $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) {
            $imageItem->setData(
                $imageConfig->getData('json_object_key'),
                $image->getData($imageConfig->getData('data_object_key'))
            );
        }
        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);
}

Answer 1

For your requirement you need to to do this things.

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

app\code\Vendor\Extension\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="Magento\Catalog\Block\Product\View\Gallery">
        <plugin name="vendor_extension_block_catalog_product_view_gallery"
                type="Vendor\Extension\Block\Catalog\Product\View\Gallery"
                sortOrder="10"
                disabled="false"/>
 </type>
</config>

2. Now create that block file.

app\code\Vendor\Extension\Block\Catalog\Product\View\Gallery.php

<?php
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){

        //YOU NEED TO DO YOUR LOGIC HERE.

        $result = json_encode($result);        
        return $result;
    }
}

Answer 2

1 : Create di.xml . Add this line

<type name="Magento\Catalog\Block\Product\View\Gallery">
      <plugin name="position_video_product_view"
            type="Vendor\Catalog\Plugin\Catalog\Block\Product\View\Gallery"
            sortOrder="10"
            disabled="false"/>
   </type>

2. Create file Vendor\Catalog\Plugin\Catalog\Block\Product\View\Gallery.php

    public function __construct(
        Context $context,
        ArrayUtils $arrayUtils,
        EncoderInterface $jsonEncoder,
          array $data = [])
    {
        parent::__construct(
        $context,
        $arrayUtils,
        $jsonEncoder,
        $data);
    }
   
   
    public function afterGetGalleryImagesJson($subject, $result)
    {
   
        $listGalleryImages = json_decode($result);
   
        /**
         * Check in the list which type is the video and put it first array
         */
        foreach ($listGalleryImages as $image) {
            if (!empty($image->type) && $image->type == 'video') {
                $k = $listGalleryImages[0];
                $listGalleryImages[0] = $image;
                $image = $k;
            }
        }
        $result = json_encode($listGalleryImages);
   
        return $result;
    }