Horizon Split Showcase video not working

Store Design
,
1

Hi there,

I am having trouble with the Horizon Split Showcase video not working. I have loaded MOV format videos onto my site and it is working, however when I load it into Split Showcase with a photo on one side and a video on the other, the video doesn’t play? I have also tried converting the video from MOV to MP4 as suggested by Google AI but still no luck.

Any tips will be helpful!

Thanks

2

Dear @user4825

Could you share me your website?
I tried to add video in to split showcase. It is working normally.

image
image1923×968 152 KB

image
image1926×955 229 KB

Regards,
Eric from Shopplaza

3

softastransfers.co.nz, password aiweap

4

HI @user4825
You can use this code for populate mp4 video inside the sections/horizon-split-showcase.liquid.

{{ section.settings.video | video_tag: controls: false, autoplay: false }}

Thanks.

5

We review issue related to the video auto play not working , Require some modification in the theme code please follow the below steps and edit /modify the code:
Step 1 : Go to the edit code and search the file name : background-video.liquid as shown in the below screenshot
Step 2 : Replace the code with below updated code

<video-background-component class="{{ video_classes }} custom-video">
 {% liquid
   assign media_width_desktop = 100 | append: 'vw'
   assign media_width_mobile = '100vw'
   assign sizes = '(min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile
   assign widths = '240, 352, 832, 1200, 1600, 1920, 2560, 3840'
 %}
 {{
   background_video.preview_image
   | image_url: width: 3840
   | image_tag: width: 1100, widths: widths, sizes: sizes
 }}
 <video
   playsinline
   muted
   autoplay
   loop
   preload="auto"
   disablepictureinpicture
   poster="{{ background_video.preview_image | image_url }}"
   ref="videoElement"
 >
   {%- for sourceElement in background_video.sources -%}
     <source
       src="{{ sourceElement.url }}"
       type="{{ sourceElement.mime_type }}"
     >
   {%- endfor -%}
 </video>
</video-background-component>
<script>
 document.addEventListener("DOMContentLoaded", function () {
   const videos = document.querySelectorAll(".custom-video video");
   videos.forEach(video => {
     [video.play](http://video.play)().catch(() => {});
   });
 });
</script>
6

Dear @user4825

I have checked your website. I couldn’t find where you are using the video and Split Showcase. Please try adding them again and pay attention to the settings in the left panel of the video block.
In case the video doesn’t play, please keep that Split Showcase active so I can investigate it.

Regards,
Eric from Shopplaza

7

Look at my gallery page - it is the 1st and 4th one

8

Is there any other way? I don’t want to use code as I’m new at this.

9

Hi @user4825

Okay, if you’re not comfortable using code, could you please send me the collaborator code? I can then fix this issue directly in your theme.

Best regards,
Devcoder :laptop:

10

This is a broken code, IMO, specifically this line:

  [video.play](http://video.play)().catch(() => {});
11

We review issue related to the video auto play not working , Require some modification in the theme code please follow the below steps and edit /modify the code:
Step 1 : Go to the edit code and search the file name : background-video.liquid as shown in the below screenshot
Step 2 : Replace the code with below updated code

<video-background-component class="{{ video_classes }} custom-video">
 {% liquid
   assign media_width_desktop = 100 | append: 'vw'
   assign media_width_mobile = '100vw'
   assign sizes = '(min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile
   assign widths = '240, 352, 832, 1200, 1600, 1920, 2560, 3840'
 %}
 {{
   background_video.preview_image
   | image_url: width: 3840
   | image_tag: width: 1100, widths: widths, sizes: sizes
 }}
 <video
   playsinline
   muted
   autoplay
   loop
   preload="auto"
   disablepictureinpicture
   poster="{{ background_video.preview_image | image_url }}"
   ref="videoElement"
 >
   {%- for sourceElement in background_video.sources -%}
     <source
       src="{{ sourceElement.url }}"
       type="{{ sourceElement.mime_type }}"
     >
   {%- endfor -%}
 </video>
</video-background-component>
<script>
 document.addEventListener("DOMContentLoaded", function () {
   const videos = document.querySelectorAll(".custom-video video");
   videos.forEach(video => {
     [video.play](http://video.play)().catch(() => {});
   });
 });
</script>
[quote="tim_1, post:10, topic:600993"]
`  [video.play](http://video.play)().catch(() => {});`
[/quote]

@tim_tairli Thanks for catching that, my bad :blush:

The final added script is

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const videos = document.querySelectorAll(".custom-video video");
    videos.forEach(video => {
      video.play().catch(() => {});
    });
  });
</script>
12

Thanks team, I’ll have a look - very weird though, I went on the site with my tablet and the videos worked - but on laptop it doesn’t.

13

The videos work fine on my computer.
It could be something with your laptop browser.
Try incognito mode or another browser, say FireFox if Chrome is your main one.

14

Dear @user4825

I think the issue lies with your browser settings. Please double-check and ensure that there are no auto-play video blocking settings enabled. Please follow the steps below to check:
1,

image
image1915×1031 321 KB

2,
image
image1911×1036 135 KB

3, reset your site and recheck it.

Regards,
Eric from Shopplaza

15

Thanks Eric, I’m on Google Chrome - how would I do that?

16

Dear @user4825

If you are using Chrome, I think the issue lies with the extensions you are using.
Please try again as a guest or in incognito mode. If the video plays successfully in an environment without extensions, you can disable each extension one by one to identify which one is causing the issue.

Regards,
Eric from Shopplaza