Support » Plugin: WP Video Lightbox » Poor UX on mobile

  • Larry

    (@lkagan)


    This plugin has such great potential. Unfortunately, it isn’t responsive and so it’s unusable on modern sites.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Support mbrsolution

    (@mbrsolution)

    Hi, sorry to hear about your issue. You might like to try the following option.

    Change the settings in the following file js/jquery.prettyPhoto.js. Change the following value from 200 to 40 as per the example below.

    if((pp_containerWidth > windowWidth)){
    	imageWidth = (windowWidth - 40);
    	imageHeight = (height/width) * imageWidth;
    }else if((pp_containerHeight > windowHeight)){
    	imageHeight = (windowHeight - 40);
    	imageWidth = (width/height) * imageHeight;
    }else{
    	fitting = true;
    };

    Let me know how you go.

    There’s no need to edit the js, just add width=100% to the HTML code of the src image and it is completely responsive

    Hi Terry,

    I’m not sure where I add the code, can you please help? I tried the CSS below but it didn’t work:

    /* Media Queries */
    @media only screen and (max-device-width: 767px) {
    /* Video width for WP Lightbox plugin */
    .wpvl_auto_thumb_box img {width: 100%;}
    }
    }

    Thanks for your help!

    Kristy

    Hi Kirsty

    the following code is placed on the web page in the text section, not the visual and adding the 100% here will make the video completely responsive. See the Tips and Tricks pages for details of what all the options are: http://www.tipsandtricks-hq.com

    Regards
    Terry

    Hi Kirsty

    the following code is placed on the web page in the text section, not the visual and adding the 100% here will make the video completely responsive. See the Tips and Tricks pages for details of what all the options are: http://www.tipsandtricks-hq.com

    Regards
    Terry

    Sorry, the code is active, so tries to load a video. Best to look at options on Tips and Tricks pages, all the options are there.

    Terry

    Hi Terry,

    Thanks so much for your quick reply. Are you using iframes? I searched your article and am not sure I can find what you’re pointing to.

    Is there a way to set the width in the WP Video Lightbox shortcode, just for mobile?

    Here is an example of one of my shortcodes:

    [video_lightbox_vimeo5 video_id=”89121069″ width=”640″ height=”480″ auto_thumb=”1″]

    I can’t imagine this can be done in the shortcode. I like how it looks on desktop and tablet, so if I could set the width to 100% for mobile using CSS, I’d be all set. Only I can’t seem to target it properly. Can you send me the proper target so I can set the width using CSS?

    Thanks in advance!

    Kristy

    Hi Kirsty,

    The site has changed a lot since I last used it, but here is a link to using CSS to style the anchor image, which is what I think what you want to be responsive : http://lightbox.tipsandtricks-hq.com/wp-content/uploads/lightbox-ult-doc/lightbox-ultimate-fancy-anchor-styles.pdf

    I don’t use shortcode the exact way they show in the examples, but do it in <a href tags. The ″ width=”640″ height=”480″ parameters you use are for the video display and can be set as a default in the Pretty Picture settings, so aren’t needed here unless each video will be a different size. I had this exact same problem to start with and I found the support on Video Lightbox to be very quick and very helpful, if this doesn’t solve your problem.

    To make the thumbnail responsive in all situations, you need to add the “width=100%” parameter to the thumbnail image. I don’t use an auto thumb, but supply a url to my own image, so, leaving out the opening and closing <a href tags, my shortcode would be

    opening tag =”https://www.youtube.com/watch?v=your reference here;rel=0″ rel=”wp-video-lightbox”>your alt text here closing tag

    Hope this helps with making your thumbnails responsive for mobile.

    Regards

    Terry

    Hi Kirsty

    same problem again.

    Contact me on terrymacsurfer@gmail.com and I’ll send the code in an email

    Regards

    Terry

    Thread Starter Larry

    (@lkagan)

    Looks like this form requires content for me to unsubscribe from email notification. No reply needed.

    Hi Kirsty,

    try this link for a detailed explanation of using the html version of the shortcode. Again, the width=100% should be used as a parameter of the thumbnail.

    https://www.tipsandtricks-hq.com/wp-content/uploads/docs/wp-video-lightbox-plugin-usage-instructions.pdf

    Regards

    Terry

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Poor UX on mobile’ is closed to new replies.