How to add my own video to product page (Not youtube video)

james0786
New Member
2 0 2

Hello Everyone,

 

I made a product video on my camera and now I want to add this video to my product page. I could not find a way to add the video. There is an option to add youtube video with embed code but how can I add my own video?

 

Looking forward to this problem

Replies 101 (101)
Ekook
Excursionist
19 0 6

Hello Brian,

thank you for your reply. I will try that. A question please, one of the texts I have translated into Italian, on the homepage, cannot be re-arranged, since I have used Etranslate and therefore translated the strings. Would it be possible to create the same layout as the English text?

Thank you, have a lovely day.

 

Kenneth_Bon
Pathfinder
122 0 66

I've tried and tried - and the video does not run.

It just shows a black default with controls - nothing happens. I've tried to implement it several ways.

What am I doing wrong?

https://www.authentic.dk/pages/testside

<video style="width: 100% !important; height: auto !important;" controls="controls">
<source src="https://info-at-authentic.wistia.com/medias/0ojz21b6em" type="video/mp4" /></video> 

<video playsinline="true" controls="controls">

    <source src="https://info-at-authentic.wistia.com/medias/0ojz21b6em" type="video/mp4" />
<p>Sorry html5 video is not supported in this browser</p>

</video> 

<video playsinline="true" controls="controls">
    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/master.m3u8?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=BIQQpuyEVnyt9HUw4o9QOmQ1z2c=" type="application/x-mpegURL" />

    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-360p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=1kEi8GmNIssxVvjyzy7AOuGP-E0=" type="video/mp4" />
    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/SD-480p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=8Lt74XmFWP6hOF1WRdqNkDWRm2U=" type="video/mp4" />
    <source src="https://videos.shopifycdn.com/c/vp/afe4b8a92ca944e49bc4b888927b7ec3/HD-720p.mp4?Expires=1560458164&amp;KeyName=core-signing-key-1&amp;Signature=vlNXWpvgRT2bghrWovJPrN8w3mc=" type="video/mp4" />
<p>Sorry html5 video is not supported in this browser</p>
</video>
Owner @ https://en.authentic.dk
Kenneth_Bon
Pathfinder
122 0 66

Partly solved my own part.

The link has to be to a specific video which I missed. I ended up compressing the video file and uploaded it in Shopify and now it works.

Owner @ https://en.authentic.dk
PaulNewton
Shopify Partner
4211 303 902

@Ekook keep in mind any page you make may be crawled by search engines or found by users using sitemap tools,etc thus the video will be discoverable too.

https://help.shopify.com/en/manual/promoting-marketing/seo/hide-a-page-from-search-engines

If you can't edit your robots.txt the last resort is to put some fake url parameters in the url, or use the literal view parameter, so only those with the FULL url+params can see the video by using javascript to check window.location. And or in combination with a logged in customer check.

Otherwise consider using @BrianAtWork's recommendation but with either a private youtube video link, or a something like a google-drive view only with link shared url.

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
Ekook
Excursionist
19 0 6

Hi @BrianAtWork,

thank you for your kind help. A question if possible please: we would like the same image but with different languages to be shown on our homepage so that, when you switch to a different language, you can see it in your language.

We have the images translated in two languages, how would it be possible to upload them? 

Thank you very much, have a lovely day.


MissN
New Member
1 0 2

Hello,

how exactly do you that in order for the video to play on a loop? 

Kenneth_Bon
Pathfinder
122 0 66

@MissN wrote:

Hello,

how exactly do you that in order for the video to play on a loop? 


I guess you can do this:

<video style="width: 100% !important; height: auto !important;" controls="controls" loop="loop"> 
<source src="xxxxx" type="video/mp4"></source>
</video>




Owner @ https://en.authentic.dk
Ekook
Excursionist
19 0 6

Hi Brian,

how are you? Unfortunately it seems the header with the logo and options (homepage) are no longer dispalyed in the mobile version and it directly starts by displaying the slideshow. Also, would it be possible to create a Shop now button on the homepage right above the slideshow, on the white part?

Thank you very much, have a lovely evening.

hannahk20
New Member
1 0 0

Thank you! This worked. But It is displaying video controls. How can I make it to autoplay muted in mobile with the "playsinline" but without video controls.

Thanks for your time,

DKR
New Member
2 0 0

Hi @BrianAtWork

Thank you so much for sharing the idea. Post some more research came across a custom code that autoplays an mp4 (sharing that). Meanwhile I want to know what is a way to add a link on this (I want the customer to click this video on my website which would then take them to my blog or product ?)

<video autoplay="" loop="" muted="" playsinline="controls" style="max-width: 100%; height: auto;">
<source src="https://cdn.shopify.com/s/files/1/0444/3747/1382/files/final_5f20b04b314cd60015b546dd_522690.mp4?v=1..." type="video/mp4">
<img src="Pre.jpg">
</source></video>


Thank you so much!
D

PaulNewton
Shopify Partner
4211 303 902

@DKR 

To have clickable links over a partial area on the video use an anchor tag <a href='shopify.com'></a> (or a button).

Then absolutely position it over the video so that the video controls are still useable.

<div class="video-container">
<video id="main-video" autoplay="" loop="" muted="" playsinline="controls" style="max-width: 100%; height: auto;">
<source src="" type="video/mp4">
<img src="Pre.jpg">
</source></video>
<a class="video-link" href="/collections">Shop</a>
<style>
.video-container { position: relative;}
.video-link { position: absolute; width: 50%, height: 50%; z-index: 2; }
</style>

 

To have an entire videos area a clickable link just wrap it with an <a> tag

Note: 💣 Accessibility issue - user controls play,pause,etc become unusable when making entire videos area clickable link. So IF users need the play/pause controls on a video DO NOT make the whole video a link , and DOUBLE DO NOT do this if there is audio. And ESPECIALLY DONT assume just because you are okay with this behavior that your customers will enjoy the lack of controls.

Though you may need to style, or reset styles, of <a> tags so they work and behave as needed when wrapped around large block content.

<a class="video-link" href="/collections">
<video id="main-video" autoplay="" loop="" muted="" playsinline="controls" style="max-width: 100%; height: auto;">
<source src="" type="video/mp4">
<img src="Pre.jpg">
</source></video>
</a>

Or use the onclick attribute or , create a click handler for a video that has it's ID attribute set

<script>    
   document.getElementById('main-video').addEventListener('click', function() {
       this.pause();
       window.location.href('/collections');
    });
</script>

 

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
DKR
New Member
2 0 0

@PaulNewton Wow, that was way simpler than i thought! Thanks so much... ps. Coffee on me as soon as get my first customer 🙂 

pmirt
New Member
1 0 0

Hi 

I used the code suggested for playing a video on my product page automatically and muted.  It works perfectly on iPhone and Adroid phones but does not work on desktop browsers, either Chrome or Edge, and I have no idea why.  On chrome an outline of the video shows and it is advancing but but no video. it's just white.  On Edge, the video starts to play and then just stops.  Again, works find on phones, not on desktop.  Suggestions?  Many thanks.

pmirt

abdullah9041
New Member
1 0 0

Hi,

I came across this solution of yours and decided to try it out since I was myself looking for such a solution.

However, the video doesn't appear on my relevant page and it also shows 'Your browser does not support our video" (see attached screenshot)
Any help regarding this would be highly appreciated.

Thanks

abdullah9041_0-1596567307627.png

 

iWoofu
Tourist
6 0 3

Works like a dream ... thank you so much

... and if video is not in mp4 format.. you can use cloudconvert.com

 

freda1
New Member
2 0 0

Hi , can you expantiate on step 2 if possible can you add picture, where do i find the html 

Ekook
Excursionist
19 0 6

Hi @BrianAtWork , thank you very much for your help.

Would you mind helping me create a "Shop Now" button on the homepage? I have created one by following a video, but I cannot modify it (I would like to make it bigger and more attractive).

Thank you very much, have a lovely day.

 

Francesco

Arbaz1
New Member
1 0 0

I have followed your steps, now my video is in the product description but it isn't playing. So what could be the reason ?

amnonkappa
New Member
1 0 0

Hello , can't follow the instructions till the end. can't find the place to copy the video url

Amnon

Dave1944
New Member
1 0 0

Hi Guys, does the video appear as part of the Product Description for you or does it become part of the gallery? In my case its adding to the description and I guess it would be the  same for you. If any one knows how to make the vid a part of the Media Gallery that would be nice. thanks