26 replies to this topic

[marshallsolutions]

In testing features slides that have a video embed along with text on the right or left do not show correctly when viewed on a mobile device in portrait or landscape mode... The text gets pushed under the video by around 90% so very few letters from the text actually show... also tested putting the text under the video in which case on a mobile device the text is completely under the video and not visable... I have tested this with both the old embed code/object and the new embed code/iframe and both do the same thing regarding text... also if i use the old embed code, the video jumps and bounces on the mobile device instead of being steady like with the new embed code using iframe... i'm using a Samsung Galaxy S2 phone for testing running Android 2.3.3... page being used for testing is

Please Login or Register to see this Hidden Content

... thanks

[Danny]

Hi Larry,

You can see how it acts by simply resizing your browser window on your desktop/Laptop. Anyway, I don't believe this is a bug, as I haven't ever seen a Slider than contains text and a video which is responsive. Responsive Video sliders usually do not contain text, really what should happen imo, is that when you choose to add a video, the ability to add text to the Feature Slider should be removed or not shown even when text has been added.

If you can provide a link to example, I will report this issue as a feature enhancement.

[marshallsolutions]

I'm fine with the text not showing on a mobile device... however it just doesn't look good for a few letters to show... i agree with you that since the text part cannot be responsive, then it should have code that removes the text in responsive mode so that it looks more clean on a mobile device... however from an asthetic standpoint, it does look better in a browser when it has text on the left or right IMO... if the text is on the bottom, then the text is not shown on a mobile device... but i prefer the text on the left or right in my example... i provided a link for example in the original post above...

[marshallsolutions]

Danny, I also tested just now your idea of changing my browser size on my laptop... it did not behave the same way as on my phone... the text moved to the bottom of the video instead of the left or right... on the phone it does not do that... it puts over 90% of the text under the video leaving only 10% or less text showing

[James B]

Hi there, as we've been discussing this via email I thought it would be better to tie it up here in the forum as it could help other users in the future.

When you set the slide to display on the left or right, the media container which the video sits inside is given a percentage width. When in a responsive set up the slider reduces but the css still has the percentage command inside, depending on the ratio you've set up or the choice of layout options made in the layout editor the results can either cause the text to go below the slider, leaving a gap at the side, or under the slider leaving the text peaking out from under the slider.

In order to combat this I took your video and tested it in a responsive layout and used some browser specific css to change the options for the layout in a mobile layout. Results are below

Desktop version -

Please Login or Register to see this Hidden Content

Mobile version -

Please Login or Register to see this Hidden Content

The setup i have in the above is as follows.

• Layout editor: Responsive with pixel width and fixed width mode
• I've inserted the PL responsive video code into the Feature HTML embed box in the slider setup. The responsive video code is [pl_video type="youtube" id="NbpZvO7Eb6o"]
• I add the below custom css to the custom code box in Pagelines>Site Options>Custom code so that it only affects mobile devices.

Please Login or Register to see this Hidden Content

Try it, I hope it works for you

[marshallsolutions]

HI James... that worked perfectly for the built-in Android browser along with Dolphin and Maxthon browsers... however Firefox and Opera still have issues... in Firefox, if you click on video #2, the text changes to that of slide 2, but the video picture is still that of slide #1... it doesn't change... if you click play on the video, the 2nd video plays audio wise, but you're still looking visually at the first slide video, meaning you can hear the slide #2 video but you can't see it... same goes for #'s 3,4,5 as well on my page example... in opera for android, instead of showing numbers like the other browsers to scroll to the next slide, it simply lines up all the videos down the page so all are visable at one time... also in Opera, the carosel nextgen gallery doesn't not show at all from the top of the page... in firefox, the nextgen galley does show but they are stretched like a vertical rectangle...

[marshallsolutions]

James... I just checked Opera on my laptop, and the code looks like it's affecting opera as the video is scaled to about 25% of the height of the features box...

[marshallsolutions]

James... safari on the laptop also has issues... when you click from slide one to slide 2, the video doesn't change... by the time i got to slide 4 the videos started piling on top of each other...

[marshallsolutions]

James... i couldn't afford to have my site not working in so many different browsers, especially desktop ones... so i put everything back the way it was before... i changed the videos back to normal embed code and made them full html width with 16:9 (1.777) ratio... this of course means no text anywhere, which i can live with i guess... i didn't realize it was going to be so much work just to get a feature slider to work correctly... all browsers on the desktop are fine except safari... changing the videos using the numbers doesn't work... it still only shows the first video... same applies to firefox and opera on android... however the built-in browser, dolphin and maxthon on the android are working ok... so i guess let's tackle the issue as it is now as hopefully this route will be less work...

[marshallsolutions]

safari on the desktop is very messed up related to the features video... if you click on numbers 2 thru 5 and then try to play the video it plays the first video, but moving your mouse around the screen the feature video goes whack... then if you try to scroll up and down the screen, the feature hangs in the middle like a window on top of the website...

[catrina]

Have you already tried deactivating plugins?

[marshallsolutions]

@catrina... why would a plug-in only affect the safari browser on a desktop when all other browsers display correctly?... the only plug-ins i have outside of pagelines ones are sitemap generator and all-in-one-seo which don't affect css stuff... also i have nextgen which you guys recommend for your theme and which i use for the carousel on the same page...

[catrina]

Plugins have a way of causing issues in either one or more browsers. It's best to deactivate just in case before moving along.

[marshallsolutions]

@catrina... i just deactivated everything except pagelines ones including nextgen... safari still acts the exact same way... it's not a plug-in

[Rob]

Larry,

If by chance one of the plugins you have is a cache plugin, and the cache wasn't cleared before deactivation, it remains, so any changes you apply don't show up.

Unfortunately, we do not support the variations different browsers can cause because there are so many. For example, we use shadows on various elements, but IE doesn't accept those at all.

So, Catrina's suggestion was very much in order as a testing methodology.

Because there are so many variables between browsers, we offer, free, a plugin called

Please Login or Register to see this Hidden Content

which allows you to customize your CSS to accommodate these variables.

[James B]

I've just seen your previous message. Yes it will be easier to leave things set to display using the full screen option rather than edit the css etc. Make sure you've removed the css from Pagelines>site options>custom code if you pasted in the example i showed you though.

I've viewed your site in safari and the videos seem to be displaying fine in there, I'm not experiencing the same problems. Are you on the latest edition of the browser?

[marshallsolutions]

@rob... i do not have a cache plugin... I have never heard a company in the webdesign industry say we don't support all browsers... although i can see this for some "no name" browser, safari is a major browser... if you don't test your sections for the major ones, then there should be a disclaimer on your site that shows the browsers that you did do testing on IMHO... the shadow example just means it doesn't show, but it doesn't make the section display incorrectly in IE that I have seen... I would have no idea how to write custom css specific to a browser since i don't know what that browser is looking for to make a features section display correctly... if it can't display properly on all major browsers, then i will have to find another method of displaying videos...

@james... yes i did remove the css you provided in order to fix the issue with opera as posted above... i'm on safari for PC (not MAC) version 5.7.1... i'm assuming that is current since my apple update program usually downloads anything more current... the first video displays fine (#1)... the issue happens when you try to go to the other slides via the numbers and then play them... this also happens on firefox for android and opera for android... try to play video 1... then pause video 1... then go to video 2 and try to play it... same with videos 3,4,5... you should experience what I see in Safari... like right now, my button shows #5 and the screen shot matches, but if i click the play button, it's playing video #3... after this try to scroll up the page and the feature should hang in the middle like a window on top of the page...

[Danny]

I have tested your Feature Slider on Safari (Mac) and there is no issue. I am unable to test Safari on Windows.

• Do these errors occur on any other browser on Windows ?
• What version of Windows are you using?
• Does your Safari have any addons installed ?

[marshallsolutions]

@danny... glad to hear mac is working since that is where most safari users will come from... im using a win7 64bit OS i7 processor with 4gb RAM... safari is plain vanilla... no add ons...

[marshallsolutions]

@danny... sorry missed your other question.. tested on IE, firefox, chrome and opera... no issues on those browsers... only safari is having issues...