Tagged: 

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • February 10, 2023 at 8:31 pm #1397509
    THP Studio

    Hey guys,

    Added a full width easy slider with a video and enabled the option to show the video controls.

    However, while the controls are visible, they can’t be interacted with – nothing can be clicked on. No matter where you click it only plays/pauses.

    Can you take a look please?

    Thanks a lot.

    February 11, 2023 at 8:08 am #1397527
    Nikko

    Hi Tim,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( to be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create an admin user and post the login credentials in the “private data” field.

    Best regards,
    Nikko

    February 11, 2023 at 3:45 pm #1397563
    THP Studio

    Hey, please see private field.

    Thanks

    Tim

    February 13, 2023 at 8:44 am #1397713
    Nikko

    Hi Tim,

    Thanks for giving us admin access.
    It seems to be a bug when video size is set to Try to match the default slideshow size but stretch the video to fill the whole slider (video will be cropped at top and bottom), we have added this CSS code in your Quick CSS to fix it:

    .av-video-stretch.av-video-service-vimeo .av-click-overlay, 
.av-video-stretch.av-video-service-youtube .av-click-overlay {
    bottom: 36px;
}

    Please review your site.

    Best regards,
    Nikko

    February 13, 2023 at 2:15 pm #1397750
    THP Studio

    Hey Nikko,

    That’s great, thanks for finding the bug. This will be added to an upcoming release I guess?

    Also, I forgot to mention a second issue with the same element:

    On desktop, there is a big play button in the center of the video. But on mobile this button doesn’t appear, so the user really has no idea that this is a video.

    Weirdly, using desktop Chrome or Safari in responsive design mode on a mobile setting, the button appears. But when actually using a real mobile device (iPhone 14) it doesn’t appear.

    Can you please take a look?

    Tim.

    • This reply was modified 1 year, 9 months ago by THP Studio.
    February 14, 2023 at 5:45 pm #1397959
    THP Studio

    Hey sorry I just updated to 5.4.1 and removed the custom css you added since it’s added in the update. But while the video controls are working, the “More videos” row of related videos that appears when the video is paused cannot be clicked on still (if you make the video full screen you can click on them, but otherwise not).

    You also can’t hover and scrub along the timeline, which if you check the video below it using the normal ALB video element you can do so.

    Seems there is still more bugs with the full width slider video implementation.

    Can you please take a look?

    Thanks.

    • This reply was modified 1 year, 9 months ago by THP Studio.
    • This reply was modified 1 year, 9 months ago by THP Studio.
    February 16, 2023 at 5:36 am #1398162
    Nikko

    Hi THP Studio,

    I have added this CSS code and it adds the button on the mobile:

    @media only screen and (max-width:767px) {
    #top .avia-slide-wrap a.mfp-iframe:before {
        content: '';
        background: rgba(238,48,35,.7);
        border-radius: 15px;
        display: block;
        margin: -50px 0 0 -75px;
        transform: scale(0.5);
        width: 150px;
        height: 100px;
        position: absolute;
        top: 50%;
       left: 50%;
       z-index: 50;
  }

    #top .avia-slide-wrap a.mfp-iframe:after {
        content: '\E897';
        font-family: 'entypo-fontello';
        font-size: 1.8em;
        top: 50%;
        left: 50%;
        position: absolute;
        z-index: 60;
        color: #fff;
        transform: translate(-50%, -50%);
    }
}

    As for “More videos”, I don’t seem to see the issue on my end.
    Also on your site, I don’t see related videos when the video is paused, did you remove it?

    Best regards,
    Nikko

    February 16, 2023 at 1:53 pm #1398215
    THP Studio

    Hi Nikko,

    Thanks for taking a look, and that CSS works well, thank you!

    I just tested again on both Chrome and Safair, both logged in and logged out and I can still see the same issues with the other controls on the video. I can’t scrub along the timeline like I can in the ALB video element which is below the full width element. I also can’t click the share icon in the top right, or click on any of the related videos (I haven’t removed them).

    Can you please take a 2nd look?

    Thank you

    February 16, 2023 at 3:07 pm #1398225
    Günter

    Hi,

    I added the following to bottom of quick CSS:

    
.av-video-service-youtube.av-video-events-bound .av-click-overlay{
	display: none;		/*	@since x.x.x  In fullwidth easy slider preview controls are blocked after user starts video		*/
}

    Seems to work now.

    Will become part of next release.

    Best regards,
    Günter

    February 16, 2023 at 3:38 pm #1398227
    THP Studio

    Hi Gunter,

    Brilliant, thank you! Yep, that’s working nicely.

    Thanks for figuring that out and adding it to the next release.

    Will the CSS to have the play button shown on mobile that Nikko added also be added to the next release?

    Regards

    Tim

    February 16, 2023 at 5:44 pm #1398237
    THP Studio

    Hey Gunter, sorry another little issue with the same element.

    Please see example in private field.

    Thanks

    • This reply was modified 1 year, 9 months ago by THP Studio.
    February 20, 2023 at 4:18 pm #1398639
    Günter

    Hi Tim,
    Please see private field.

    Best regards,
    Günter

    February 20, 2023 at 5:52 pm #1398651
    THP Studio

    Hey Gunter,

    Please see private field, thanks

    Tim

    • This reply was modified 1 year, 9 months ago by THP Studio.
    February 21, 2023 at 5:53 am #1398728
    Ismael

    Hi,

    The video elements in the builder including the background video options in the slider only accepts the first format. You will get issues if you use the other format because the theme doesn’t recognize it. Before choosing a video, you will actually see a note about the accepted URL format.

    Choose Video
    Either upload a new video, choose an existing video from your media library or link to a video by URL

    A list of all supported Video Services can be found on WordPress.org. YouTube videos will display additional info like title, share link, related videos, …

    Working examples, in case you want to use an external service:

    https://www.youtube.com/watch?v=G0k3kHtyoqc

    Best regards,
    Ismael

    February 21, 2023 at 6:10 am #1398729
    THP Studio

    Hey Ismael,

    Please see private field.

    Thanks

    • This reply was modified 1 year, 9 months ago by THP Studio.
    February 21, 2023 at 6:27 am #1398732
    Ismael

    Hi,

    . YouTube’s current default sharing link protocol isn’t recognised by the ALB theme element.

    What do you mean? Would you mind providing a link to a documentation about this? We edited the Youtube URL above.

    Best regards,
    Ismael

    February 21, 2023 at 6:34 am #1398733
    THP Studio

    Hi,

    Thanks.

    February 21, 2023 at 11:03 am #1398750
    Ismael

    Hi,

    But the other format also points to the same URL. The URL above is just shortened. If you enter the shortened URL in your browser, it will just redirect to the other URL, which is the accepted format in the Advance Layout Builder. Not really sure what is the difference when sharing.

    Best regards,
    Ismael

    February 23, 2023 at 4:04 am #1398953
    Ismael

    Hi!

    For some reason, we can’t add a fallback image to the slider. This fallback image should display instead of the video on mobile devices and should redirect to the fallback link when clicked. Unfortunately, background videos in the theme’s sliders or color section are not allowed to play on mobile devices (as written in the fallback image option).

    Choose a preview/fallback image
    Either upload a new, or choose an existing image from your media library
    Video on most mobile devices can’t be controlled properly with JavaScript, so you can upload a fallback image which will be displayed instead. This image is also used if lazy loading is active.

    You may need to use the Layer Slider element or stick with the Video element.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Full Width Easy Slider Video Issue’ is closed to new replies.