About distinguishing the Hero video on the mobile phone and the computer

Technical Q&A
1

Because the size of the hero video displayed on the mobile phone and the computer is different, I made two videos. How should I make different videos available on the mobile phone and the computer respectively and prevent them from appearing at the same time?

1 Like
2

Hello @SWIS

You can add media query CSS to do that. Let say the video HTML is


You want to show video1 on desktop, video2 on mobile, then you can add this CSS

```css
#video2 {
    display: none;
}

@media (max-width: 768px) {
    #video1 {
        display: none;
    }

    @video2 {
        display: block;
    }
}

Hope it helps!

1 Like
3

Thank you for your reply, I would like to ask where should I add the URL links of video1 and video2?

4

The video HTML code looks like this
1 Like
5

Hey what theme are you using?
you should be able to add custom css in your theme editor without having to go into the code files directly.

  1. in customizer add your two video sections. One with your mobile video, and one with your desktop video.

  2. on your mobile video add this code:

@media screen and (min-width: 601px) {
{
display:none;
}
}

  1. on your desktop section, click custom css and add this code:

{display:none;}

@media screen and (min-width: 601px) {
{
display:block;
}
}

for the pixel amount, see which width the breakpoint is at and enter that number in there.

for this css code, beget the inner {} is usually a selector name such as .video-container{display:none;} but since this custom css section setting is available, how the code works is it automatically applies to the section you’re editing, so you don’t put any selector name before it as it will automatically apply to itself. If you wanted to say, keep the whole video but only hide the videos text, then you would need a selector for that.

but as my code is it should work but let me know if it doesn’t.

1 Like
6

Tysm!

1 Like
7

You are welcome!