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.
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') {
 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). 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;
 $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;
 }
}

• fudu: 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: I've update the image i take in the post in case you wanna see it
• Dhiren Vasoya: What login you apply here to change the video into first position?
• fudu: You mean what code did i custom to make this work? I've update in the post. Please take a look up there.
• Dhiren Vasoya: 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

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;
    }