Embed video and autoplay with Craft Theme

Hi this is my first question here.

I am using the Craft theme and this theme only allow upload youtube and vimeo video. I would like to upload an embed video hosted at Shopify. And it should be autoplay.

Is this possible not to slow down the page speed doing this?

Thank you for your help.

If you’re autoplaying a video you’re also loading that video during page load, so it will slow down your page load speed (more resources take longer to load).

The most effective way to load a video for performance is to use what we call “deferred video loading”.

This works by just loading an image during page load + a play button on that image. Then when you click the image, the video is loaded so you can play it.

Here’s a guide for the tactic if you want to maximize performance: https://speedboostr.com/deferred-video-loading.

Something to keep in mind if you’re deciding what would be best for conversion rate, rather than speed, is that autoplayed videos annoy a lot of people, especially if they’re on a slow connection and it clogs up the rest of the page loading. Some mobile devices / browsers actually block auto play, so even if you set autoplay it might still not autoplay.

All that to say, my advice is to use deferred video loading to maximize performance + give your user the option to see the video or not.

But also, conversion rate is probably your main goal so if autoplaying the video yields a significantly higher conversion rate, then it may be worth keeping. The only way to tell would be to A/B test with and without a video auto playing (I would test auto play vs deferred video loading). Theme Scientist is an A/B testing app for Shopify that can do stuff like that.

Thank you so much. I will think about this. I never thought it would be annoying people with autostart. Great advice, thank you.

There is still the problem showing a video at the start page hosted by Youtube. It does not look good in my eyes.

I would like to host it on Shopify despite its probably slower performance.

Do you have a code to embed it, and host it at Shopify?

You’re welcome.

Yes for embedding video in Shopify you could either upload the video in a section (if your theme has a video section) or you can upload the video in Settings > Files then add HTML code to show the video.

Here’s an example + explanation: https://www.w3schools.com/html/html5_video.asp

And here’s some additional help to make the video responsive so it auto sizes according to the user’s device: https://speedboostr.com/how-to-embed-responsive-videos.

You can probably get this working with those examples, just make sure you do the edits on a backup theme so you don’t affect the live site in case something goes wrong.

If you get stuck and need a developer to implement this for you (or any features / website edits), reach out to speedboostr.com/contact to get in touch with a team of professional Shopify developers.

Thank you so much. I will try this.

1 Like