FROM CACHE - en_header

How to add a video on my homepage without YouTube info

Sofi_txu
Tourist
9 0 1

I want to add a video on my store's homepage but don't want any of the Youtube info (logo, title, bottom bar etc.) to appear in it. I've tried to edit the embed url I get from YouTube using rel=0 modestbranding=1 showinfo=0 etc. but nothing seems to work.

 

The other option I have is to upload the HTML5 MP4 file URL but this seems even harder. 

 

I'm not very familiar with coding.

 

Any help would be MUCH appreciated! 

 

 

Replies 40 (40)
sarhov
Shopify Expert
489 85 166

Well, at first let us know which theme you're using ?

 

Also, how you are currently adding youtube video, via theme settings, for direct inserting it in theme files ?

Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

Sofi_txu
Tourist
9 0 1

Hello I'm using the TURBO theme.

 

To post videos, I used to create a page and then add the embed Youtube url. I've never tried to edit the code before. 

sarhov
Shopify Expert
489 85 166

So, you are switching into HTML mode in page dashboard and put the emmbed code from youtube  ?

Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

Sofi_txu
Tourist
9 0 1

Yes, this is what I wanted to do, but since I have trouble removing the Youtube logos etc. from the embed url, I thought that maybe there is another way.

 

I would like my video to look like the one in the homepage of Vita Fede

 

No logos, no bars, no play buttons, just the video itself. What's the best way to proceed? I've seen that the video used in this case was from Vimeo.  

hannasmith91
New Member
2 0 0

Did you find a solution to this? I have the same problem!!!

sarhov
Shopify Expert
489 85 166

@Sofi_txu 

 

Well for that you need HTML5 video to be emmbed, so at first you should upload video files into files section, .webm and .mp4 formats, then again switch into HTML mode and past its code, of course don't forget to change urls to yours one (which you have already upload into files section).

 

<video loop="" muted="" autoplay="autoplay" preload="" id="vid">
    <source src="url_of_the_file.webm" type="video/webm">
    <source src="url_of_the_file.mp4" type="video/mp4">
  </video>

Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

OldSchoolBeauly
New Member
2 0 0

That is brilliant - I have just added an autoplay video to our homepage: https://oldschoolbeauly.com/

But on the mobile it is showing a black box with the play button etc...

Is there a way of getting it to auto-play on mobile??

I am using the Focal theme

JigneshKumar
Tourist
5 0 1

where to put

<video loop="" muted="" autoplay="autoplay" preload="" id="vid">
    <source src="url_of_the_file.webm" type="video/webm">
    <source src="url_of_the_file.mp4" type="video/mp4">
  </video>

code?

JigneshKumar
Tourist
5 0 1

i have somehow fit this into desktop view, but in mobile & tablets - it is going out of proportion.

can you please help

Chris_Jay
New Member
2 0 0

Hi, where do you put  this code. I am stuck not knowing, thanks

SasaMcmc
New Member
3 0 0

Thank you so much this is so easy to implement with my Fastor theme Im so happy! 😄 YOU MADE MY DAY :D. If you have any further advice about how to change the size of the video it would be much appreciated. Currently it takes up the whole page and appears on mobile but not restrained to fit. Im about to start researching this now 😉 Thanks Again!

MS-WEB-DESIGNER
Shopify Partner
3012 181 488

Dear Sofi_txu,

 

Hope this will help you: https://www.huratips.com/tech-tips/how-to-add-a-video-section-to-your-shopify-home-page.html

Click Here to Hire Shopify Store Customization Experts
Boost Conversions & Average Order Value with this
Best App for Sticky Add To Cart
Sunwaves
New Member
3 0 0

Online Store > action > edit code >templates > index.liquid 

Sunwaves
New Member
3 0 0

ad <center> </center> before and after the <video> section. Add width parameter as a green word( width=90%80/70% find your best)

SasaMcmc
New Member
3 0 0
Thanks will try it now 👍👍👍
SasaMcmc
New Member
3 0 0
Ok, I found index.liquid but no joy with a video section, anywhere apparently?
realShughart
Tourist
6 0 9

It's honestly ridiculous how shopify states to be such simple shop, jet many themes aren't working correctly and you can not use many of the simplest functions.

Alignment
Tourist
3 0 3

Adding "width = 100%" like this worked for me, I hope it works for you!

<video loop="loop" muted="" autoplay="autoplay" preload="" id="vid" width =100%>
<source src="https://cdn.shopify.com/s/files..." type="video/mp4"></video>

Jingle
Tourist
7 0 2

How can I put the video at the top? I was able to edit code in the templates index.liquid but it playing at the bottom of the page. Help!