How to display different videos in each language?

Hello, we have created a multilingual website using the Weglot plugin. However, since we have an explainer video on the homepage, we would like to upload a different video for each language. Is this possible? Thank you very much!

Best
Natasa

https://savenow.squarespace.com
pw: SF2023

I think it should possible with some CSS code. You use Video Block or Section Video Background?

Hi @tuanphan

We're using Video Block.  You can find it on the home page of https://www.save-now.ch/ website.

Thanks!
Natasa

17 hours ago, hello_studiofrey said:

Hi @tuanphan

We're using Video Block.  You can find it on the home page of https://www.save-now.ch/ website.

Thanks!
Natasa

You mean this video?

When change language, WeGlot adds a name to HTML tag of website

Default: html[lang="de-CH"]

If choose English >> It is html[lang="en"]

So we can use this code + target video block id to hide it

For example, if you want to hide current video on English Page, we will use this CSS code

html[lang="en"] div#block-3cc00b0d72362a527745 {
	display: none !important;
}

or on De CH language, use this

html[lang="de-CH"] div#block-3cc00b0d72362a527745 {
	display: none !important;
}

so my ideal is add 2 videos, then use CSS code to hide corresponding video on each page

Use this tool to find video block id: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Hello @tuanphan 

Thank you very much for your help! The code worked, however, I am not able to play the German video now, even though I see the preview. Also, if I switch from the English version back to German the video doesn't change without the page reload but that is a minor issue. Do you have any idea what could be the problem with the German video? 

Thank you very much!
Cheers
Natasa

Video is fine to me

@tuanphan That is the English version which works for us too. But the German version cannot be played. 
If you click on the play button, nothing happens. However, to see the German version, you have to choose the language and then reload the page to see the German video.

Try this new code

html[lang="en"], html[lang="en-US"] {
div#block-yui_3_17_2_1_1704897992777_6100 {
    display: none !important;
}
}
html[lang="de-CH"], html[lang="de"] {
div#block-yui_3_17_2_1_1704897992777_9256 {
    display: none !important
}}

If it doesn't work, can you write some text on video or add a first frame to video with EN/DE text? I can test code easier.

Both look similar so it takes a bit of time to know which video is EN and which video is DE

Hello @tuanphan
Unfortunately, the new code doesn't work either. I have now inserted a first frame to the English video, it is the one with blue colour overlay. I hope this helps.

Thank you very much for your help.
Natasa

Top video will show on English Page?

Second video (bottom arrow) will show on German page?

Remove code I sent & Use this new CSS code

html[lang="de-CH"], html[lang="de"] {
div#block-yui_3_17_2_1_1704897992777_9256 {
    display: none;
}}
html[lang*="en"] div#block-yui_3_17_2_1_1704897992777_6100 {
    display: none !important;
}

Hello @tuanphan ,
Yes that's correct, the blue one is English. 
However, the code still doesn't work. I also tried to exchange them but the video that is below another one cannot be played and the one on top works well. Now I reversed them and the English one doesn't work as it is in the layout below the German one. 

It worked to me

Video

https://www.loom.com/share/5fa3a15b1b9442aca878355bc076514e

@tuanphan The problem is that one video cannot be played (english one), the preview of a video is not a problem.

https://www.loom.com/share/afef71288be74e5597a2e49dd586ce3d?sid=36ab8a5a-413a-4986-a5a6-80ea56d9c38f

Thank you very much @tuanphan it finally works now!
Have a good one