That is awesome! Thanks for compiling all this information.
I have some hopefully constructive feedback for the video element and am willing to help you out if needed with the CSS for the video element.
It looks like its a pre-made solution, but unfortunately the CSS it uses is very old school (using fixed width and height and positioning everything absolute). That means it is not responsive at all, which becomes apparent on a phone, where the whole thing is just hidden, which is a real shame.
I understand you probably didn’t want to just embed all the videos individually, because some plugins have a lot of tutorials, but I think it would actually be better that way. It would be more accessible and responsiveness would be a whole lot easier.
You actually added a “Video Tutorials” button to the top of the page, but on mobile you hide the video section, so the button does nothing. You should at least hide the button as well. But really there is no reason to hide the video section. The CSS is fixable. Basically you don’t want to set fixed widths and heights anywhere. Always use max-width and max-height instead. Then for the width and height of video you do something like:
@media screen and (max-width: 600px) and (min-width: 100px) {
#html5gallery-elem-video-0 {
width: 100% !important;
height: 100% !important;
max-width: calc(100vw - 60px);
max-height: calc((100vw - 60px) * 0.6);
}
.html5gallery-elem-0 {
width: 100%;
height: calc((100vw - 60px) * 0.6);
max-width: calc(100vw - 60px);
}
}
But really I would say to just use another viewer that is responsive and uses modern CSS. Using position absolute and fixed widths and heights everywhere will mean a lot of CSS to make it responsive and just means you will eventually replace it anyways. It should be built with flexbox.
Also, I don’t see a problem with just embedding all the videos one after the other. That way you avoid all this complexity and it’s actually much easier to use. There is nothing wrong with scrolling on a long page. Having a list that changes the video just doesn’t work well on mobile, because you will scroll down the list, click on a video title and the video will change in the viewer which you then have to scroll to again first.
Lastly, I would add some sort of icon to the overview page that shows if any and how many videos are in one of the plugins or sections.
I hope this feedback is constructive. If you would like any support with the CSS I am happy to help. I am a UX designer and have been re-designing and optimizing the usability of large websites for many years.
