The cover photo or image sits in front of the place holder and video control buttons. The cover photo is given a name, in this example “videocover”. Each photo /image link has the following code javascript: vplayer('video name'); This v3 code is placed the the Page HTML (body) <script> var view = document.getElementById('vidplayer'); var source = 'https://initiostar.co.uk/assets/'; function vplayer(vid) { if (view.style.display === "none") { view.style.display = "block"; } locate = view.setAttribute('src', source + vid); document.getElementById('videocover').style.display = "none"; } function pauseVid() { view.pause(); } function playVid() { view.play(); } </script> This code is placed in the video Placeholder HTML (body) <video id="vidplayer" width="100%" height="100%" playsinline controls autoplay disablepictureinpicture controlsList="nodownload" style="display:none"; > The Play, Pause and Close buttons have the following links javascript: void playVid(); javascript: void pauseVid(); javascript: document.getElementById('videocover').style.display = "block"; pauseVid(); The ‘var source’ is a server-side library (folder) that holds the videos - none of the video assets are included in the design file which means this approach is lightweight and fast loading. This source is the designer’s choice. The design uses Scale-to-fit-Width and was intentionally designed to work with a mobile variant using custom-built play and pause buttons.

JS Video Player Page Plugin

Code and instructions are outlined in the tablet / desktop version of this demonstration
Video Plugins and Management
Video Library Project
Video Plugin and Management
Video Library