Add a video to Shopify in an optimized way

Summary

When we want add a video to your Shopify store, in the product sheet for example, the first instinct is to host it on Youtube and then integrate it on Shopify.

However, this is not really a good idea!

Why not add a video from Youtube? 

Youtube offers a quick and easy system for embed a video on a website. You must first host it on your platform and then retrieve the iframe code that we can place anywhere in the code of our website.
embed videoThe main problem is that Youtube remains Youtube, and will make sure that you go to its platform. Lots of areas will then be clickable and will be able to redirect your visitors to Youtube. Not great when we want to keep our visitors and convert them into customers. Worse yet, it's highly likely that competitor's videos will appear as a suggestion.

The second problem is that hosting a Youtube video will slow down your Shopify store. Indeed, Youtube generates dozens of requests to communicate with its servers and correctly display the video.

The solution ? Host the video on Shopify

With Shopify, you have unlimited storage space. It is therefore strongly recommended to host all of your content directly on it to benefit from full control.

Upload Video to Shopify

Go to Settings then Files:

settings then filesDownload the video with the button Upload files

Upload files

You will get a URL that you can use later:

URL

Embed the video on your store

Imagine that you want add a video on the product page, in the description thereof.

You need to copy the following code:



 

And paste it in the description of your product page, at the desired location:

description of your product pageConsider replacing VIDEO-URL by the url generated in the "Download video on Shopify" section.

This will give you this:

example video

To learn more

Now that we've added our video, we'll see how to customize the player.

It is possible to add some functions via attributes:

  • loop: allows you to play the video in a loop
  • poster: allows you to add a presentation image
  • autoplay: allows you to play the video automatically
  • muted: allows you to mute the sound
  • controls: allows you to display the action buttons (play, pause, zoom, etc.)
  • width: allows you to adjust the width
  • height: allows you to adjust the height

Example, for a video where you want to: mute the sound, loop playback, 100% width and the control buttons:



To go even further

That's it ! We added a video via Shopify, creating our own player. We will now see how to give it a really pro "Youtube" look.

Youtube presents the videos in the following way: A presentation image and a big play button. When you click on it, the image disappears and the video is played, with the presence of the control buttons.

So we will try to reproduce the same thing.

Let's start from the following base:




Let's add some CSS to hide the player and add a play button in the center:

 

.video-wrapper {
position: relative;
}
.video-wrapper > video {
width: 100%;
vertical-align: middle;
}
.video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {
display: none;
}
.video-overlay-play-button {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px calc(50% - 50px);
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 0.95;
cursor: pointer;
background-image: linear-gradient(transparent, #000);
transition: opacity 150ms;
}
.video-overlay-play-button:hover {
opacity: 1;
}
.video-overlay-play-button.is-hidden {
display: none;
}

 

Let's finish by adding the JS necessary for the button to work properly:

var videoPlayButton,
videoWrapper = document.getElementsByClassName('video-wrapper')[0],
video = document.getElementsByTagName('video')[0],
videoMethods = {
renderVideoPlayButton: function() {
if (videoWrapper.contains(video)) {
this.formatVideoPlayButton()
video.classList.add('has-media-controls-hidden')
videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
}
},
formatVideoPlayButton: function() {
videoWrapper.insertAdjacentHTML('beforeend', '\
\
\
\
\
')
},
hideVideoPlayButton: function() {
video.play()
videoPlayButton.classList.add('is-hidden')
video.classList.remove('has-media-controls-hidden')
video.setAttribute('controls', 'controls')
}
}
videoMethods.renderVideoPlayButton()

 

Here is the result:

video result

Leave a comment

Please note that comments must be approved before posting