1 reply · opened Feb 18, 2020
On https://www.woodbridgeandco.com/ the video section at the top of the page does some strange things whilst it's loading. Sometimes the video starts playing at position top, center before it's position has been applied after which it jump to center, center. It's easier to see if you apply a throttling in Chrome DevTools (Slow 3G)
Hello,
Since, this is the Default Behavior of the Video and since the autoplay Attribute is added to the Video, the video starts playing once it is ready to be played. And while the Page is Loading the JS Calculations are applied on the Video to position the Video correctly in the container. The Page Transition is used by default in Canvas to allow for these adjustments to happen before the Pages are completely loaded to allow smoother experience. However, since you are not using the Page Transition, you are seeing these adjustments which is the normal behavior of the Page. To resolve this, consider using this CSS Code:
.video-wrap video {
opacity: 0;
transition: opacity .4s ease;
}
and then add the following code at the end of the html5Video: function() Function Block in the js/functions.js File:
elementVideo.css({ 'opacity': 1 });
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard