Docs

[ASK]

How can I get video to play on my laptop, which has a small enough screen that the mobile deactivation is happening?

I’ve implemented the custom css below that affects the parallax effect in the same manner, and I’m hoping there’s something similar in css or js for the video activation to happen on my itty bitty widdle screen (trust me it can still handle the video fine!)

@media (max-width: 950px) {
    .touch .x-section.bg-image.parallax, .touch .x-section.bg-pattern.parallax,
    .touchevents .x-section.bg-image.parallax, .touchevents .x-section.bg-pattern.parallax {
        background-attachment: scroll !important;
    }

[John Ezra]

Hi there,

Thanks for writing in! To assist you with this issue, would you mind providing us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything. Thanks!

[ASK]

This reply has been marked as private.

[Rupok]

Hi there,

It should play on laptop screen fine. Would you clarify what’s the screen resolution for the laptop you are referring?

Cheers!

[ASK]

1349×682 is my browser’s screen size in Chrome.

By the way, video (and parallax) works in Edge. Perhaps it’s having a touchscreen under Win10 that’s the issue with all other major browsers, rather than a screen size issue? I’ve seen that before.

[Rad]

Hi there,

A yes, some functionality will not work on Hybrid device since some features can’t be loaded at the same time (desktop + mobile). We’re still looking some fixes but no lucks since there is no standard of how should hybrid devices handled.

Thanks!

[ASK]

No solution? That’s a shame. I see plenty of other sites on my laptop on which parallax and video both work fine. Others have figured it out – you should too!

Let’s work together to fix this. What can you tell me about this hybrid issue?

[Rad]

Hi there,

In that case, please provide the other sites and we can use them as reference 🙂

Please check this https://community.theme.co/forums/topic/navbar-submenu-hover-and-color/page/2/?replyto=1082493#post-1089684

Thanks!

[ASK]

The last one that comes to mind? Not a great example, perhaps, because this was a WordPress site to which the owners had no access, so I brought it over to my server sans-backend and is now just a single html page site: http://parksidemarket.com/

But it handles parallax scrolling fine.

For video, sites like http://www.bukwild.com/, https://vine.co/, http://inside.jumeirah.com/ all support bg video on my preferred browsers.

[Rad]

Hi there,

I’m not saying it’s impossible to implement parallax to touch base devices, but X theme’s Parallax is intentionally disabled on touch based devices due to performance issue. For example, http://parksidemarket.com/ the parallax on this site is disabled too on mobile device view (you can try it on your phone), the only difference is we decided to disable it on all touch-based devices because there are too many.

About the video, I checked and the background videos are also disabled on touch-based devices. Please note each device could handle it differently. And the other one uses a GIF http://www.bukwild.com/uploads/06/09/home-final-done.gif ( to create the illusion that it plays video ) with proper CSS sprites manipulation to separate them.

And please also note that X theme is only utilizing the resources and library provided by WordPress. Like the one used for the video, it’s WordPress Media Element library.

Thanks!

[ASK]

I’m only trying to get it to work on my hybrid laptop, not mobile devices. The whole point of showing you those sites was because they work on my laptop… never mind how they respond to actual mobile devices.

If it’s intentionally disabled, please let me know how to intentionally re-enable it, and I’ll deal with the usability consequences. I can manage.

[Rad]

Hi there,

Yes, but the hybrid is also detected as mobile due to touch feature ( csModernizr.touchevents ). What we’re saying is, both desktop and mobile features are loaded or not loaded at the same time since both desktop and mobile features exist on a hybrid device. And currently, the code can’t differentiate if it’s desktop or mobile, but since a hybrid is also a touch device, then it also detected as mobile. We’ve been working on that and there is no reason for us to keep the solution secret if there is one.

The parallax initialization is on this file \wp-content\plugins\cornerstone\assets\dist\js\site\cs-body.min.js and it’s compiled.

Find this,

n.hasClass("parallax") && (csModernizr.touchevents ? n.css("background-attachment", "scroll") : (n.hasClass("bg-image") && (speed = .1), n.hasClass("bg-pattern") && (speed = .3), speed && n.parallaxContentBand("50%", speed)))

and change it to this,

n.hasClass("parallax") && n.hasClass("bg-image") && (speed = .1), n.hasClass("bg-pattern") && (speed = .3), speed && n.parallaxContentBand("50%", speed)

Thanks.

[Author]

Posts