Hide video controls + overlay desktop mobile Fabric theme

Store Design
, , , ,
1

Hi guys,

In my Fabric theme but actually on all Horizon themes, I would like to remove the video overlay with the controls. I just want to play a video on loop. Preferabkly with CSS. I managed to do this on desktop, but in mobile its not working.

I tried this one:

video::-webkit-media-controls {
  display: none !important;
}

Any help would be great!

Kindest,

Kelly

2

hii @IMYOURGIRL Remove the video overlay and controls from the Fabric and Horizon themes (for both desktop and mobile).

1) CSS to hide overlay layers

Put this in your theme’s CSS file (base.css or theme stylesheet):

.video__overlay,

.video-section__overlay,

.deferred-media__poster,

.media__poster,

video::-webkit-media-controls {

  display: none !important;

  opacity: 0 !important;

  visibility: hidden !important;

}

video {

  pointer-events: none;

}

This removes most custom overlay layers used by Horizon themes.

2) Important fix for mobile (recommended)

You also need to remove the controls attribute from the video element.

Go to the relevant section/snippet file, such as:

  • sections/video.liquid

  • snippets/video.liquid

  • sections/media-with-text.liquid

Find something like:
<video controls

Replace it with:

<video autoplay loop muted playsinline>

Remove controls completely.

This is the key fix for mobile devices.

3) Optional autoplay fallback

If autoplay does not start on some devices:

document.querySelectorAll("video").forEach(video => {

  video.play().catch(() => {});

});
3

Hi! I can’t find anything with ‘controls’ in it. What else could it be?

4

Horizon does use video_tag filter, like this:

Look at the lines 95/99 and 118

5

Thanks, what should I change here:
It seems this is only for external video’s though..

  {% capture video_tag %}

    {% if video.host == 'youtube' %}

{{

video

        | external_video_url: autoplay: true, loop: video_loop, playlist: video.external_id, mute: '1', controls: controls, enablejsapi: enable_js_api

        | external_video_tag: data-video-type: 'youtube'

}}

{% elsif video.host == 'vimeo' %}

{{

video

        | external_video_url: autoplay: true, loop: video_loop, muted: '1', controls: controls, api: enable_js_api

        | external_video_tag: data-video-type: 'vimeo'

}}

{% else %}

{{ video | video_tag: image_size: '2500x', autoplay: true, loop: video_loop, muted: true, controls: controls }}

{% endif %}

{% endcapture %}

{% endif %}
6

I think it worked with this:

  {% liquid

    if disable_controls

assign controls = false

assign enable_js_api = true

else

assign controls = false

assign enable_js_api = false

endif

%}
7

Try controls: false in line 118 instead of controls: controls

Note that this change will apply to all self-hosted videos. Just in case.

8

It already worked by changing controls = false here. Do I still need to change it on row 118 too?

9

Right. Ideally you need to find where this {% render "video", disable_controls: XXX is called and ensure that there is a disable_controls parameter and XXX is true.

But I mean if you have controls showing where you do not want them to show, then you can override and make them to never show.

10

Hello @IMYOURGIRL please use below code i hope this is working fine

  1. Open the code search and find video.liquid.
  2. Please replace the code snnipets that I selected.

image
image1904×847 70.5 KB

{% capture video_iframe %}

      <iframe

        src="{{ video_src }}"

        class="{{ class }}"

        allow="autoplay; encrypted-media"

        allowfullscreen

        title="{{ video_alt | escape }}"

      ></iframe>

  {% endcapture %}

{% else %}

  {% liquid

    if disable_controls

      assign controls = false

      assign enable_js_api = true

    else

      assign controls = false

      assign enable_js_api = false

    endif

  %}