Hello,
Currently, I have a html5 video on my component. This is a interactive video and plays upon page load. I would like not to play the video on mobile. So, I am trying to get a screen width on Sightly so I can add a condition on Sightly/HTL to inject this video only if screen width is > 480. I know that Sightly/HTL executes on Server Side.
Any ideas to get the screen width to inject a video html based on width would be appreciated.
Thanks.
As mentioned in the post(how to hide header menu item when using mobile devices? ),Please write your logic in SlingModel/Wcmusepojo class to check whether the device is mobile or not and put a check in htl like below:
package com.dev.java;
public class Main extends WCMUsePojo{
private boolean mobile;
@Override
public void activate() throws Exception {
setMobile(getRequest().getHeader("User-Agent").indexOf("Mobile") != -1 ? Boolean.TRUE: Boolean.FALSE);
}
public boolean isMobile() {
return mobile;
}
public void setMobile(boolean mobile) {
this.mobile = mobile;
}
}
Corresponding SIGHTLY
<div data-sly-use.main="com.dev.java.Main">
<sly data-sly-test.isMobile="${main.isMobile}">
video
</sly>
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.