Shopify themes, liquid, logos, and UX
Hi Everyone,
I have been trying to figure out how to prompt different videos to launch depending on whether the user is viewing the shop on mobile or desktop.
I was told that if I uploaded two custom liquid codes featuring the landscape video (desktop) and portrait video (mobile) then there was a code that would prompt each one to launch for each device.
This was the code I was suggested :
/* Code for Desktop Banner */
@media screen and (max-width: 480px){
#shopify-section-template--22677475131741__custom_liquid_geKPV3 {
display: none;
/* Code contrubution by websensepro.com */
}}
/* Code for Mobile Banner */
@media screen and (max-width: 480px) {
#shopify-section-template--22677475131741__custom_liquid_zMBVDz {
display: block !important;
/* Code contrubution by websensepro.com */
}}
#shopify-section-template--22677475131741__custom_liquid_zMBVDz {
display: none;
}
I currently have added the two custom liquid codes to feature the landscape video (desktop) on the home page like so :
and then another liquid code for the portrait video (mobile)
Now with the code it displays perfectly within the customise tool and also only displays one video on desktop but once I view on a mobile it displays both like so :
I hope I explained this clear enough...
If anyone has any ideas please let me know.
Thank you!
Hi@AverageBoy01 ,
I checked your store. "}" is missing in the base.css. You can refer screenshot below to add
Add code below to base.css
@media screen and (min-width: 481px) {
#shopify-section-template--22677475131741__custom_liquid_zMBVDz {
display: none!important;
}
#shopify-section-template--22677475131741__custom_liquid_geKPV3 {
display: block!important;
}
}
@media screen and (max-width: 480px) {
#shopify-section-template--22677475131741__custom_liquid_geKPV3 {
display: none!important;
}
#shopify-section-template--22677475131741__custom_liquid_zMBVDz {
display: block!important;
}
}
Thank you!!! Fixed now. Life saver.
How can this be done? i have added a video block and then tried to include the code but nothing worked. I have also tried to include the code within the "edit code" in a new section which i called custom video but nothing happened.
In which section does the custom liquid have to be included and how can i make it play automatically.
Could you please provide the steps for displaying 2 different videos: one for mobile and one for desktop.
Thank you very much in advance!!
Hi @notiziad ,
Could you share your URL store? I will help to check it.
Because your store will have an other ID for each section. So when you apply code above it will not work.
Hello! Thanks for your reply. We haven't launched it yet, it is password protected for visitors. Shall i e-mail the password for visitors to you?
We have added on the homepage a video section from template and tried to put the liquid code with the link of the video but it says that the sintax is wrong. I have tried all this on a copy but nothing worked. I have added the video as a property instead of a liquid code. Also tried to add custom css to the video but nothing, tried to change in html still nothing. Also it's not playing on loop without having to press play.
Hi,
Yes, I will help to take a look issue for you. Please help share info.
Thrilled I found this chat as I have been looking for a similar solution. I currently have my site set up for different banner images but want to change it to having different banner videos for mobile and desktop - I could not find any video or discussion talking about this (only banner images). @EBOOST is it possible to take a quick look at mine to help me figure out what code is needed?
Hi @projectsbydel ,
Which theme are you using? If you don't use a free theme. Could you share code of video section? Because The fee theme will have other structure and I can't access to see their code. So I need you share code. I will help to apply it for you.
Oh sorry. Yes I am using the free Dawn theme.
Hi @projectsbydel ,
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Sections/video.liquid
3. Replace code of file with code here https://github.com/eboost10/2640367/blob/main/2642389/sections/video_seperata_mobile_deskotp.liquid
4. Go to theme -> customize -> add your settings
Hello - thanks for the reply. So this works if I just want a different 'video', however what i am looking for is different 'video banners'. That way I can put text/buttons over it.
Hi,
I updated code here https://github.com/eboost10/2640367/blob/main/2642389/sections/video_seperata_mobile_deskotp.liquid. Could you try it again?
should i put this in the video.liquid file or the video-banner.liquid file?
Hi,
it's video-banner.liquid file
Unfortunately it is not working properly. Although there is now the option to put a separate desktop and mobile video, the banner is containerized on desktop, even when you disable that option and the videos do not autoplay . Also my mobile video display size is very small with banner and button overlap too big.
😛
Hi,
- I added an option to show content below video in mobile.
- Removed auto play video
- Updated code for Show container on desktop option.
https://github.com/eboost10/2640367/blob/main/2642389/sections/video_seperata_mobile_deskotp.liquid
Thanks for the help.
Unfortunately videos are not autoplaying and mobile is still not functional from a sizing standpoint. I do appreciate the attempts however.
Hi,
Video mobile should be 16:9 aspect ratio. I turned off autoplaying video featured.
How do I remove the video controls that shows up when loading? The pause button.
Hi,
Could you share your store? I will help check to find a solution for you.
Hi,
1. Go to Store Online-> theme -> edit code
2. Assets/component-deferred-media.css
3. Add code below to end of file.
.video-section .deferred-media__poster{
visibility: hidden;
}
Thanks for the reply. Unfortunately it doesn't work.
Hey, This code works perfect but when I add a video for both there seems to be like a dark overlay on them? Its as if I turned down the brightness on them or added a dark transparent layer over them. Can you take a look please? Thank you
Hi @EcommKingz ,
Could you share your URL store? I will help to take a look it.
Hi @EcommKingz ,
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Add code below to end of file
.video-section .banner::after,
.video-section .banner__media::after {
display: none!important;
}
That worked great thank you so much! I am wondering is there a way to have this video just play on a loop and not have to option to play/pause?
Hi,
You mean You would like to show the same screenshot below?
I would like to have no option to press play or pause I would like it to automatically just play on a loop.
Hi,
You only go to customize to turn on it.
The loop is working but I do not want the play/pause button to be there.
I want to hide all of these options you can see in the image below. I don’t want people to be able to press play or pause or anything like that I just want the video to play automatically.
I have tried the code you have shown above in the assets-component deferred media and it didn’t work.
Hi,
You can go to section/video.liquid. Find "controls: true" After that replace " true" to "false". You can refer screenshot below:
Amazing thank you so much! You’ve been a great help 😁
It was working and now unfortunately it’s not? It’s showing a play button but won’t allow the video to even play now? I’m so confused 😩
No video looks fine for me, but the timeline is still there
Oh really? Does the play/pause button show on screen when you load up?
Yes In bottom of video
Well, i do have as you say, a grey overlay on video for desktop. Not on mobile. But play/pause on both devices
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024