How can I display high-res video on my homepage?

[Tim2000]

Hi all!

I'm trying to get a high-quality video to play when people land on the Home page.

Because on the home page, videos embedded in Shopify can't seem to go above 20mb, I'm externally hosting it on Vimeo. (I believe Product pages allow up to 1gb but not Home).

But on Vimeo, the external video links only go up to 1080p - which isn't great quality.

Is there a way to have high-resolution video on the Home page???

Thanks,

Tim

[Tira]

Hey, Tim.

I’m here to help.

Thanks for reaching out and I appreciate you doing your own research on adding videos to your homepage on your store. 

I did some research for you as well and I have some insight on adding videos to your store:

• When you want to add a video, you can use the “Add Section” button on your theme’s theme customization page to add a video section to your homepage. Typically this section will ask you to enter a URL from either YouTube or Vimeo, and it sounds like you’ve tried to use a Vimeo URL before.
  
  
• When the URL is added, it will embed a video player directly from YouTube or Vimeo, depending on which video provider you use. 
  
  
• If this option doesn’t work for you, you may be able to customize the code by editing the video section’s code directly. For example, in the Boundless theme, there is a featured-video.liquid template. In that template, you can directly edit the URL that’s embedded. Here is a screenshot from my test store’s code of what this looks like:
  
  
• Before editing your theme, I recommend duplicating your theme so that you can have a backup copy or a fresh copy to go back to, should your code need to be adjusted again or your edits don’t go as expected. You can also roll back to an older version of your theme. Here's our help doc where you can learn more about things to know before customizing your theme.

What is the name of the theme you’re using? You can check this by logging into the Shopify admin, clicking on “Online Store > Themes” and the name of the theme will be listed on the page there. I would love to know so I can point you in the right direction!

Chat soon,

[Tira]

Hey again, Tim!

How have you been? Did the workarounds I provided earlier help you move forward with adding video to your store?

I would love to know!

Cheers,

[PaulNewton]

@Tira This could also be on vimeo end, if they actually have a 4K version,  and/or need more url parameters.

https://vimeo.zendesk.com/hc/en-us/articles/224983008-Setting-default-quality-for-embedded-videos 

Also they didn't fully clarify if they are trying to do this with autoplay but that seems the intent,  if they are trying to autoplay HI-Res I don't think defaulting to 4K autoplay on homepages should be encouraged or supported for performance reasons and respecting users bandwidth. Unless they can provide context like they are a movie store.

[Tira]

Thanks for chiming in, @PaulNewton. I agree with you, if the intent is to add autoplay videos, we typically don’t recommend this as some browsers will automatically block autoplay on videos that have sound. On mobile devices, like Android and iOS, autoplay is disabled by the operating system to save users mobile data.

Other reasons autoplay would not be recommended are:

• Visually impaired users that use screen readers can't hear the screen, or find how to stop the video. Autoplay videos can also have a negative impact on accessibility, as this can cause discomfort, or even pain, for some users who are sensitive to movement or sound. By ensuring that the customer has control over the video playback, a site is more accessible to a wider audience.
• Some people browse the internet while watching TV, or are on the phone, or while completing other tasks that have sounds. Autoplay video interrupts the users task, which will most likely lead to page abandonment.
• Many users will also automatically close a browser tab that has sound by default, which means that an autoplay video will definitely lose a merchant sales and hurt their overall conversion.

Here is an article that explains more about Google Chrome muting autoplay videos that might help.

How are you doing, Tim? We would love to know if any of our solutions helped or if you were able to resolve this on your own.

[MRamzan]

Here is a simple method to embed video: