Fixing Bugs with Wix Video .play on mobile, and removing the vignette effect on Wix video on Desktop.

Ask the community
,
1

Hello, here is a quick video of what we are struggling with.

Thanks for your time and help!

Here is a sample of the Our Team section code (that does not work correctly on mobile) and Services section code (that works correctly on Mobile).

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

$w.onReady(function () {
 //TODO: write your page related code here...

});

export function Lucas_click(event) {
    $w('#LucasPhone').show();
    $w("#LucasVideo").show();
    $w("#LucasVideo").play();
    $w("#LucasClicked").show();
    $w("#Lucas").hide();

    $w('#JacobPhone').hide();
    $w("#JacobVideo").hide();
    $w("#JacobVideo").stop(); 
    $w('#PeterPhone').hide();
    $w("#PeterVideo").hide();
    $w("#PeterVideo").stop(); 
    $w("#SoniaPhone").hide(); 
    $w("#SoniaVideo").hide();
    $w("#SoniaVideo").stop(); 
    $w("#MattPhone").hide();
    $w("#MattVideo").hide();
    $w("#MattVideo").stop();
    $w("#JudahPhone").hide();
    $w("#JudahVideo").hide();
    $w("#JudahVideo").stop();

    $w("#Sonia").show();
    $w("#SoniaClicked").hide();
    $w("#Matt").show();
    $w("#MattClicked").hide();
    $w("#Judah").show();
    $w("#JudahClicked").hide();
    $w("#Jacob").show();
    $w("#JacobClicked").hide();
    $w("#Peter").show();
    $w("#PeterClicked").hide();

    $w("#Homepage").show();
    $w("#WebsiteIcon").show();
    $w("#WebsiteIconClick").hide();
    $w("#WebsiteVideo").hide();
    $w("#WebsiteVideo").stop();
    $w("#BrandingIcon").show();
    $w("#BrandingIconClicked").hide();
    $w("#BrandingVideo").hide();
    $w("#BrandingVideo").stop();
    $w("#VideoIcon").show();
    $w("#VideoIconClicked").hide();
    $w("#VideoVideo").hide();
    $w("#VideoVideo").stop();
    $w("#DroneIcon").show();
    $w("#DroneIconClicked").hide();
    $w("#DroneVideo").hide();
    $w("#DroneVideo").stop();
    $w("#PhotographyIcon").show();
    $w("#PhotographyIconClicked").hide();
    $w("#PhotographyVideo").hide();
    $w("#PhotographyVideo").stop();
    $w("#SocialMediaIcon").show();
    $w("#SocialMediaIconClicked").hide();
    $w("#SocialMediaVideo").hide();
    $w("#SocialMediaVideo").stop();
    $w("#DigitalAdvertisingIcon").show();
    $w("#DigitalAdvertisingIconClicked").hide();
    $w("#DigitalAdvertisingVideo").hide();
    $w("#DigitalAdvertisingVideo").stop();
    $w("#ConsultationIcon").show();
    $w("#ConsultationIconClicked").hide();
    $w("#ConsultationVideo").hide();
    $w("#ConsultationVideo").stop();

}
export function WebsiteIcon_click(event) { //Add your code for this event here: 
    $w("#WebsiteIcon").hide();
    $w("#WebsiteIconClick").show();
    $w("#BrandingIcon").show();
    $w("#BrandingIconClicked").hide();
    $w("#BrandingVideo").hide();
    $w("#BrandingVideo").stop();
    $w("#VideoIcon").show();
    $w("#VideoIconClicked").hide();
    $w("#VideoVideo").hide();
    $w("#VideoVideo").stop();
    $w("#DroneIcon").show();
    $w("#DroneIconClicked").hide();
    $w("#DroneVideo").hide();
    $w("#DroneVideo").stop();
    $w("#PhotographyIcon").show();
    $w("#PhotographyIconClicked").hide();
    $w("#PhotographyVideo").hide();
    $w("#PhotographyVideo").stop();
    $w("#Homepage").hide();
    $w("#WebsiteVideo").show();
    $w("#WebsiteVideo").play();
    $w("#SocialMediaIcon").show();
    $w("#SocialMediaIconClicked").hide();
    $w("#SocialMediaVideo").hide();
    $w("#SocialMediaVideo").stop();
    $w("#DigitalAdvertisingIcon").show();
    $w("#DigitalAdvertisingIconClicked").hide();
    $w("#DigitalAdvertisingVideo").hide();
    $w("#DigitalAdvertisingVideo").stop();
    $w("#ConsultationIcon").show();
    $w("#ConsultationIconClicked").hide();
    $w("#ConsultationVideo").hide();
    $w("#ConsultationVideo").stop();
}
2

I would highly suggest grouping all of these elements you mean to show and hide at the same time, or else attaching them to a transparent box element and hiding them that way.

The hide function in Corvid is a slight adaptation of this , and the devs note in the docs:

Note: This method may cause performance issues, especially when used on many elements. If you're encountering such issues, use performance testing tools to determine whether this method is causing them.

I can’t guarantee this will solve all issues, as your code is quite inefficient, but it might be enough.

3

Hey David, thanks for responding. I don’t think grouping will work, because each time a button is clicked a different combination of elements is either hidden or shown. For example, if the website button is clicked, that means the website video is showing and playing. Once I click on the Photography button, I will need to hide all other videos and show and play that one. Does this make sense? Let me know if you think I am misunderstanding.

Here is the test link to get an idea of what I mean: https://lucasbessey.wixsite.com/edgenew

Thanks again for your time and help!

4

@lucasbessey Very snazzy!

In that case, the best solution would probably be a variation of this:
https://www.wix.com/corvid/example/collapse-elements?commentId=5d4ca2ceb52f9b0017862974&origin=notification&postId=5d4c7d01b52f9b00178622cb&replyId=5d4caf1d7e07100017c7752e

This will require some patience on your part, as you will have to spend some time renaming elements. However, the end result will be much cleaner more efficient code that you will be able to edit much more easily in the future and you will also be able to insert the video play/stop functions as well.

If you’d like to save the hassle and have it done within a couple hours, feel free to email me .

5

@skmedia Thanks! I will check this out. I am enjoying the learning process but will certainly keep you in mind for future work.