Faster page loading

Support
#1

Hi X Team I have a question / request on my website:

When it’s viewed on a mobile device I can still here my sizzle video playing in the background. So my most pressing question is how to I add a CSS rule to this classic video player so it only loads when when its correct size? In this case I have 2 page layouts. A pc one that is for large / mid sized resolutions of 980px and up. And then another one that is for smaller mobile devices 980 down.

Ok so there is the question of getting the video to stop playing but the real question I have and this a bigger one. Are BOTH layouts being load no matter what size the user looks at the site? I mean my site is loading poor inside of x (authoring environment) and I know from previewing that this is getting the site to load slow for the end user as well. So big question is there a way around this? Where only the needed elements are being loaded for the user and hence cutting down on page load times?

Thanks for help,

John

#2

Hello John,

Thanks for writing in! All the elements you have inserted on the page will be loaded in smaller or larger screens. The elements will not be seen because it is hidden from sight if you use the “Hide During Breakpoints” option in “Customize” tab. For the video, if you have two videos on the page, only the visible video will be cached and played.

To lessen the elements on the page, I recommend that you create a few sections and elements on the page. The layout of the mobile and desktop should not be too complicate and simple enough. Like for example, a three column section in large screens will collapse into 1 column in smaller screens.

Hope this helps.

#3

WOW I don’t even feel like you read my support ticket. OK lets try this again.

FIRST GO TO MY WEBPAGE on a mobile device:

When you get there you will hear the video playing even though its not displaying because it’s only visable on larger displays. So lets start there fixing that problem.

The elements will not be seen because it is hidden from sight if you use the “Hide During Breakpoints” option in “Customize” tab. For the video, if you have two videos on the page,

I have no idea where this option try to discribe this much clearer to me, is this in the customizer? Is it in cornerstone? The X controls get detailed in the instructions, USE SCREEN CAPS

I’m angry you have wasted a full day of time… And by the way telling me to limit my creativity because x is not properly optimized to to handle robust full screen and mobile pages is another nail in your coffin. Looking hard at Jupiter. Client for 5 years

John

#4

I found this:

But this article isn’t even relevant any more because the custom command that they are talking about isn’t even there.

I’m really feeling sad, you guys have been my fav word press tool for years and your pretty much doing every thing you can to push your loyal customers out the door.

John

#5

Also I feel like I need to point out that since I’m you a legacy layout in x some of the newer tools like the breakpoints are not available to me so going all the way back to my original request I’m going to need a HARD CSS answer to control viability for my video element

#6

Hello John,

I apologized for the confusion. I have read your thread. In your original post, you asked:

how to I add a CSS rule to this classic video player so it only loads when when its correct size?

And I pointed you to the hide during breakpoints because a css cannot be used to stop a video from playing. You can only hide/show the video using a css or the hide during breakpoints. And also I am addressing your bigger question which I explained briefly.

“back to my original request I’m going to need a HARD CSS answer to control viability for my video element”.

  • There is no CSS to control your video. CSS is a language that describes the style of an HTML document. Any events will not be handled by a CSS code.

To handle events, you will need Javascript. Perhaps this link could help you:

Just a suggestion:
Once you set your video to “Autoplay”, it will always be playing once the page is loaded. If it is viable to disable autoplay, please disable autoplay and let the users choose whether to play the video or not.

Hope this helps.

#7

Alright let me be abundantly clear.

What I would like is the video to autoplay on a larger screen format.

When it’s loaded on a mobile device I don’t want it to play or even load.

I don’t give a s*** if it’s CSS or JavaScript or whatever the heck you have to do to get it to do that I am your client I have bought many licenses from you and I essentially and paying the bills to keep the lights on over there. I want you to tell me how to achieve this effect as plainly and easily as possible and in as much detail as you can then I will consider this problem resolved when the effect I am trying to achieve above is done. Anything less than that can be considered an unsuccessful support ticket. Do I make myself clear I want the video to autoplay on a large display and not to play on a mobile. Do not write me back with anything other than a solution on how to make that exact effect happen. If you need to enlist the support of your colleagues to get me a concise answer on how to do this I would suggest you do that because if I get the run around in one more ticket I am going to elevate this unsuccessful support transcript to a superior of yours and nail your ass to the wall for being unhelpful do I make myself clear!

#8

And just so we are clear about one more thing do not put another link to a stack Overflow Solution on this form post with me. You are the one that sits through that b******* you are the one that finds the answer you are the one that tests it and you are the one that passes along the exact code that I need to put into axe to get the effect I am looking for working.

#9

Hi there,

Unfortunately, X theme, Pro, and Cornerstone have no such feature even on older versions. Hiding an element will only hide it but it still there, hence, Video will still play but just hidden. I could add this as a feature request since this can’t be done by simple CSS and Javascript.

I am now escalating this thread for further discussion.

I remember that kind of feature, but it’s from Revslider and you can use layer visibility to control the video or hide it all on mobile.

Thanks!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.