The page initially loads fine and the five slider pages cycle through on a 10000ms timer fine. A preview of each of the five videos is shown OK. Tried on Windows 10 PC running Chrome, an LG G2 Android Phone and a Nexus 7 Android Tablet all with the same results.
The issues appear to be browser specific as the web page appears to work fine on Windows 10 with the Microsoft Edge and Internet Explorer web browsers.
The issue is when any of the videos are selected for playing, this causes erratic operation on the page:
Selecting, playing and stopping first video works fine
Selecting second, third or fourth video starts first video
Selecting fifth video causes all slider pages to show blanks, although the first video is playing as you can hear the audio
Other erratic operation when videos are selected
Is there an issue with how the web page has been created or is this a webflow problem? Any work-arounds?
PS: Please note the left arrow in the slider has been removed as it did not allow selection of the Youtube video stop icon which was in the same screen area.
I don’t know if there is a specific issue with how Webflow behaves here, but I can give you my 2 cents about using multiple videos in a page.
In short: Videos in popups and multiple videos in a page, or withing a slider, brings many problems. The most annoying one is no control over the playback. A video you start in a popup or slide will not stop when you close the popup or browse the next slide.
There is another problem, when using lots of video embed, it’s using a lot of computer resources. Too much.
So, the solution is to use Youtube or Vimeo API. I mention Vimeo because for developers, their API is way easier to use. Using the API, you’ll be able to set only one player and to send it multiple video urls. You’ll be able to close a video when you perform another action in the web page (clicking).
But yes, it requires development and it’s not at the level of a non-coder designer. I myself have to request help on this (and pay).
The web page contains web links to the five videos within the slider, the videos are only downloaded and started if the user selects one to play. So computer resources should not be a problem.
I have found that the web page and videos work fine with Internet Explorer and Microsoft Edge browsers, the issue is specific to Google browsers in Windows (Chrome), ChromeBook (Chrome) and Android (LG G2 and Nexus 7). Seems to be an issue with the code generated by Webflow, hopefully Webflow Support will investigate this issue.
Hi @jetski777, thanks a lot for the update. The read-only link really helps. The autoplay does not seem to be an issue per se, but that is good to turn off from a UX perspective.
I did notice there are some javascript errors related to the video, so those should be fixed first:
I changed the webflow video links to the youtube videos to embedded code, using the embedded code provided by youtube. The java errors all disappeared but the video playing issues remain. Additionally, the embedded videos no longer scale, compounding the problems.
Since neither video links to the youtube videos or embedded youtube code worked in a Webflow slider, I got ride of the slider and just listed the videos down the page with the Webflow video parameter. Page works fine and is responsive, shows great on my smartphone.
Hi @jetski777, thanks for the update. I think that is the best thing to do, to use the videos separately from the sliders, as video embeds in Sliders can sometimes cause issues on different devices.
