Issues while using YouTube video in product images on the product page

This topic has 13 replies, 3 voices, and was last updated 4 months, 2 weeks ago ago by Luca Rossi

  • Avatar: Family Care
    Family Care
    Participant
    December 27, 2024 at 16:41

    We have a few issues while using YouTube video in product images on the product page:

    1. If the images are only 4 and 5th is video and if its position is last, then some scroller problem its little one.
    2. If we set video position to first, then it makes the images very mess up and scroller is not working fine and even UI for these images is messed up.
    3. For youtube video how to make sure it fits the available space on product page so that it shows itself fully and not cutting at the corners.

    Everything is explained in ths screen recording: https://monosnap.com/file/S1Py3hntTkHjkaV6VFJkMjBEJxS9MZ

    Product link: https://familycare.pk/product/believia-mesh-nebulizer/

    You can also temporarily use your any video embed code etc. for testing purpose and then revert to the embed code already inside product.

    Please, contact administrator
    for this information.
    12 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    December 30, 2024 at 16:22

    Dear @Abdul Moiz,

    We hope this message finds you well.

    Could you kindly check the update now? We have moved the video to the last position in the sequence. This adjustment was made because, when the video was placed first, the iframe required additional loading time, which caused display issues. By positioning it as the last item, we were able to address this concern and have also ensured that it is center-aligned for better presentation by adding of custom CSS for Product gallery widget in Elementor editor.

    Thank you for your understanding, and please let us know if there is anything else we can assist you with.

    Best regards,
    Jack Richardson
    The 8Theme Team

    Avatar: Family Care
    Family Care
    Participant
    December 30, 2024 at 17:14

    Well, I already know how would it look like if moved to last. My point is if it moved to first, it should work because there are options in your theme, if you give options, they should work for fist, last.

    Also you didn’t check my other points at all.

    Avatar: Justin
    Luca Rossi
    Support staff
    January 1, 2025 at 13:49

    Dear @Abdul Moiz,

    There is no other options for now.

    If this does not meet your requirements, you are welcome to submit a request for new functionality on our Taskboard via the following link: https://www.8theme.com/taskboard/ . Suggestions that receive significant support from other customers will be thoroughly reviewed by our development team for potential inclusion in future updates.

    Should you have any further questions or need assistance, please do not hesitate to contact us.

    Best regards,
    The 8Theme Team

    Avatar: Family Care
    Family Care
    Participant
    January 1, 2025 at 13:56

    alright. no problem. but yeah, can you at least do some css to fix this small issue with scroller up and down:
    1. If the images are only 4 and 5th is video and if its position is last, then some scroller problem its little one.
    Listen first few seconds might be a minute in this screen recording: https://monosnap.com/file/S1Py3hntTkHjkaV6VFJkMjBEJxS9MZ
    Product link: https://familycare.pk/product/believia-mesh-nebulizer/

    We will ignore point 2, 3 for now.

    Avatar: Justin
    Luca Rossi
    Support staff
    January 2, 2025 at 06:38

    Hi @Abdul Moiz,

    Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

    
    body .swipers-couple-wrapper .vertical-thumbnails-wrapper .swiper-custom-left {
        top: -30px;
    }
    
    body .swipers-couple-wrapper .vertical-thumbnails-wrapper .swiper-custom-right {
        bottom: -30px;
    }
    

    https://prnt.sc/pHYr7GGBhSD0

    Kind regards,
    The 8Theme Team

    Avatar: Family Care
    Family Care
    Participant
    January 2, 2025 at 09:43

    Well, its okay but its not consistent with other theme. Like in this product which doesn’t have any video, you can see it has some area free on the top while in the bottom its aligned to main pic so is there any chance you can make it this way because what you fixed is on the top its upper then pic and same below.
    check this product for it: https://familycare.pk/product/believia-cardiology-bcs-06/

    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    January 2, 2025 at 10:14

    Hi @Abdul Moiz,

    In this case, please update the previous CSS code to this:

    
    body .swiper-vertical-images .vertical-thumbnails-wrapper ul {
        padding-top: 0;
        padding-bottom: 0;
    }
    body .swipers-couple-wrapper .vertical-thumbnails-wrapper .swiper-custom-left {
        top: -30px;
    }
    
    body .swipers-couple-wrapper .vertical-thumbnails-wrapper .swiper-custom-right {
        bottom: -30px;
    }
    

    Let us know how it goes!

    Avatar: Family Care
    Family Care
    Participant
    January 2, 2025 at 11:00

    OKay. it looks good now.
    Now if you could help us or at least guide us what can be the issue with video not showing full thumbnail because we simple copy pasted embed code from youtube. As on same product or in attached screenshot you see video is stretched to sides which are hidden as text is cutting. Is there any way you can help us with showing full video on the image screen.

    Also how to rename title on video which is ‘video’ to something YouTube Video?

    Avatar: Family Care
    Family Care
    Participant
    January 2, 2025 at 11:01

    here is the image also you can see on same product url i.e. https://familycare.pk/product/believia-mesh-nebulizer/

    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    January 3, 2025 at 05:18

    Hi @Abdul Moiz,

    Unfortunately, the thumbnail of video is loading over the youtube iframe so we can’t control to add any custom CSS codes.

    To change the video text, please add the following code under functions.php file locates in your child theme:

    
    function n2t_text_strings( $translated_text, $text, $domain ) {
    	switch ( $translated_text ) {
    		case 'video' :
    			$translated_text = 'YouTube Video';
    			break;
    	}
    	return $translated_text;
    }
    add_filter( 'gettext', 'n2t_text_strings', 20, 3 );
    

    Hope it helps!

    Avatar: Family Care
    Family Care
    Participant
    January 3, 2025 at 11:43

    Okay thanks it works for youtube name change.
    alright no problem. I appreciate whatever you helped us
    but you should put this point to your dev list whether video is at the top or bottom, it should work for all.

    Avatar: Justin
    Luca Rossi
    Support staff
    January 3, 2025 at 17:28

    Dear @Abdul Moiz,

    We kindly encourage you to share your suggestion on our Taskboard at https://www.8theme.com/taskboard/. If your idea garners sufficient support from other customers, our development team will carefully evaluate its potential inclusion in a future update.

    Thank you for your valuable input and for helping us improve.

    Kind regards,
    The 8Theme Team

  • Viewing 13 results - 1 through 13 (of 13 total)

The issue related to '‘Issues while using YouTube video in product images on the product page’' has been successfully resolved, and the topic is now closed for further responses

Helpful Topics

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.