Shopware 6 Video Hack: How to Add Custom Uploads

By default, Shopware 6 only provides 2 cm elements to add videos to the shopping experience pages. They are Vimeo videos and YouTube videos. You can only add what is on YouTube or Vimeo to our site. So there is no provision to directly upload video and show it on the front end. In this blog, it discusses how to add custom-uploaded videos to the site.

This blog assumes that you have the basic knowledge to develop cms blocks and elements.

First, we need to create a custom CMS block

I am not writing the full code here. Just explaining what is needed extra to implement it.
In the custom cms block for video, just call the custom video cms element from the block that we will develop.

In the custom video cms element, you can use the same element as the image cms element and the YouTube video element. You can use the image upload element from the image cms element and the config settings of the YouTube video element.

Copy the image upload elements and just add a file. Accept a parameter to accept only videos, as shown below:

<sw-media-upload-v2
           variant="regular"
           :upload-tag="uploadTag"
           :source="previewSource"
           :allow-multi-select="false"
           :default-folder="cmsPageState.pageEntityName"
           :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
           @media-upload-sidebar-open="onOpenMediaModal"
           @media-upload-remove-image="onImageRemove"
           fileAccept="video/*"
       />

Also, you can add settings like loop, autoplay, etc., like YouTube video elements.
The last thing needed is the media preview to show a thumbnail for the video on the site.

You can use the same image upload element with changes to the function name, like renaming onOpenMediaModal to onOpenMediaPreviewModal. You also need to add a data resolver to load the media data on the front end. Don’t forget to add data for video and media previews in the resolver.

With these customizations, Shopware 6 becomes more versatile, enabling businesses to showcase a wider range of content beyond YouTube and Vimeo, enhancing the overall shopping experience on the front end.