The Placeholder intentionally has a reduced height, compensated with a Scroll to page Top to bring the display back into view. Not necessary for a short list of videos, but is demonstrated here to show the function.

JS Video Player v2

This code is placed in the video plugin page HTML code (body) <script> var view = document.getElementById('vidplayer'); function display() { var show = view.style.display; view.style.display = show === "none" ? show = "block" : show = "none"; } 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); window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); } function pauseVid() { view.pause(); } function playVid() { view.play(); } </script> Each link uses the function vplayer and the video file name javascript: vplayer('Parsonage TV Channel.mp4') 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 the video plug-in is lightweight and fast loading. 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 v2

Video Plugins and Management
Video Library Project
Video Plugin and Management
Video Library