Add custom mp4 file to Fotorama but without using iframe - Magento 2.4

Question

We would like to load a custom mp4 file on the productpage, directly into the fotorama, but without using a iframe. We do not want to use the YouTube or Vimeo method.

We already found the solution to load a script like below into the Magento_ProductVideo/templates/product/view/gallery.phtml template. But that does load a iframe and we just want to load the video directly in the page, not within a iframe. This also removes any video that's used trough YouTube or Vimeo. We want to extend it, not remove it.

And we also would like to add the class "fotorama-video-container" so we can see that it is a video, not a image.

So directly like:

<video name="media">
<source src="/media/catalog/video.mp4" type="video/mp4"/>
</video>

Is there a way to achieve this by modifying the code?

Current script:

<script>
 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 autoplay webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>');
 }
 });
 fotorama.push({
 thumb: '/media/catalog/mp4thumb.jpg',
 src: '/media/catalog/video.mp4',
 type: 'iframe',
 caption: 'Mp4 video caption'
 });
 });
 });
</script>

• Rohit Gohel: Hello JGeer I am working on your issue can you please tell me in which place you have to add this class "fotorama-video-container" ?

Answer 1

I have worked into your issue for the get video tag apart from the iframe, below I have added a solution please replace your script to this script code and your issue is resolved.

also, I have added a "fotorama-video-containerclass" into this video div

<script>
 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 === 'video') {
 extra.frame.$stageFrame.html('<div class="product-video" data-related="0" data-loop="0" data-width="100%" data-height="100%"><video class="custom-video"><source src="' + extra.frame.src + '" type="video/mp4"></video></div>');
 }
 });
 fotorama.push({
 thumb: 'media/catalog/one.png',
 src: 'media/catalog/Shopping_Cart.mp4',
 caption: 'video',
 type: 'video'
 });
 });
 setTimeout(function() {
 $('.custom-video').closest('.fotorama__stage__frame').addClass('fotorama-video-container');
 $('div.fotorama__nav__frame--thumb[aria-label="video"]').addClass('video-thumb-icon');
 $('.fotorama-video-container').addClass('play-icon-hidden');
 
 $('.fotorama-video-container').on('click', function() {
 $(this).toggleClass('play-icon-hidden');
 var video = $(this).find('video')[0];
 if (video.paused) {
 video.play();
 } else {
 video.pause();
 }
 });
 
 $('.fotorama-video-container video').on('play', function() {
 var style = $('<style>.fotorama-video-container:after { opacity: 0; }</style>');
 $('head').append(style);
 });
 
 $('.fotorama-video-container video').on('pause', function() {
 var style = $('<style>.fotorama-video-container:after { opacity: 1; }</style>');
 $('head').append(style);
 });
 }, 3000);
 });
</script>

Please use this code and approve my answer if it is working for you and also give upvote.

• JGeer: Thanks a lot! This almost works perfect. The only problem is in the thumbnail slider, there should be a class added to the <div class"fotorama__nav__frame fotorama__nav__frame--thumb video-thumb-icon fotorama__active"></div>. This div should have the class video-thumb-icon. How can we also add that?
• Rohit Gohel: But i think this is not needed because I have add only this class fotorama-video-container so I have so the video thub icon by default please check the snap - prnt.sc/A9EJ2fyVJwmZ
• Rohit Gohel: else this is not working into your site so give me some time I will added for you please explain me more for that
• JGeer: Thanks Rohit! This indeed does not work on our side. For some reason the fotorama-video-container class does not add the video thub icon. Only on the main element itself, not in the slider. And this is really logical, because in your code you are looking for the closest .fotorama__stage__frame but this class is not inside the slider.
• Rohit Gohel: i got the solution please use this code and video come to the first place - pastebin.com/wyuK2cAt