Adding a M4V video file to a product

[14Steve14]

We have a supplier that has released lots of 360 degree short videos of some of their products and we would like to add them to our site.

I have done a quick search of other posts but cannot find anything relating to this question. I see there is one addon but that is not quite what I am looking for at the moment.

If it is possible, can it be added as a product image thumb rather than in a separate module in the product page? These videos are less than 15 seconds long.

[burt]

M4V is a proprietary Apple format, so (as far as I know) it's not possible to embed in a webpage without using other software. Best bet would be to google for more info.

If your supplier can do a more open format eg MP4 (I think), you'd have a better chance.

[14Steve14]

M4V is a proprietary Apple format, so (as far as I know) it's not possible to embed in a webpage without using other software. Best bet would be to google for more info.

If your supplier can do a more open format eg MP4 (I think), you'd have a better chance.

Thanks Gary.

With a bit of searching I can get a M4V video to play within the webpage just by adding a short bit of code to the product description.

Code: Select all

<div><h6>Video Description</h6>
      <p>This video shows...</p>
    </div>
      <div style="text-align:center" width="w-100" controls="true">
        <video class="embed-responsive-item" controls="true">
          <source src="https://www.mywebsite.com/pc/videos/852600.M4V"/>
        </video>
    </div>

Is there any way to get that code as a replacement to an image in the image gallery.

[heatherbell]

Is there any way to get that code as a replacement to an image in the image gallery.

Took more time than I thought to get there but see demo:
https://psiwebsites.com/themes/1096/pro ... ducts_id=7

[14Steve14]

Took more time than I thought to get there but see demo:
https://psiwebsites.com/themes/1096/pro ... ducts_id=7

That looks good. Are you going to add it into your addon or create another.

[heatherbell]

That looks good. Are you going to add it into your addon or create another.

As you originally requested, it uses code in the HTML Content as a replacement to an image in the image gallery so there's no need for an addon.
Happy to share here though, if my time saves the time of users, Buy Me A Beverage is appreciated.
Instructions:
Go to New/Edit Product > Product Images (tab) > Add New Gallery Image (button)
Browse to upload a 'PlaceHolder' image which is required. In the demo, this was just an image with Fontawesome fa-youtube free icon. A screensnip of your video with that Icon on top would look best.
Paste code into HTML Content according to the source of the video file. Getting it to display well in the gallery modal is what took the time.

If the source is on your server and is m4v as per your request.

Code: Select all

<style>
    @media (max-width: 767.98px) { /* This targets viewports smaller than 768px */
        .carousel-caption {
            display: block !important; /* Forces the caption (and video) to display on small screens */
        }
    }
</style>
<div style="text-align:center; width:100%;">
    <video class="embed-responsive-item" controls="true" style="display:block; margin: 0 auto; max-width: 100%;">
        <source src="https://dev.phoenixcart.org/1095/images/sample_640x360.m4v" type="video/x-m4v"/>
    </video>
</div>

Of course, change the src URL/path/file accordingly.

If the source is, for example, Youtube.

Code: Select all

<style>
    @media (max-width: 767.98px) {
        .carousel-caption {
            display: block !important; /* Ensures that the caption (and iframe) is visible on small screens */
        }
    }
    /*Make iframe responsive */
    iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9; /* Keeps the 16:9 aspect ratio */
    }
</style>
        <div style="text-align:center; width:100%;">
            <iframe src="https://www.youtube.com/embed/rCuu6gP99IQ?si=WbWhhJM8t03_KZ46" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </div>

Of course, change the src URL/path/file accordingly.

[14Steve14]

@heatherbell

Thanks for that. Its not too different from what I had in the product text bit. I did try that in the html section but it didn't show anything. Time to have a practice and a play to get some images setup. These videos are 360deg product videos and only last a fe seconds, which I thought may improve the products page hence the original question. We are going to store the videos on our server as its easier that way.

Good to also know that youtube videos can also be done as one of our glue suppliers has videos showing their products.

Again thanks for your help. If I can get it working will send a few beers.

[heatherbell]

If I can get it working will send a few beers.

Note, code in previous post now edited with further improvements for small viewports though personally think using Gallery Images is a 'square peg in round hole' approach.

app.php/addons/paid_addon/videos_buttons/ is much better for display and versatility, demo - https://psiwebsites.com/themes/10821/pr ... ducts_id=9

Once app.php/addons/paid_addon/videos/ (required) is installed, it is simpler to use too, the 'Self Served' link in the demo only required saving (example code):

Code: Select all

<video controls="true">
   <source src="https://www.mywebsite.com/pc/videos/852600.M4V" type="video/x-m4v"/>
</video>

Saved once but can then be assigned to any number of products and used to display in other modules elsewhere.