The Placeholder intentionally has a reduced height, compensated with a Scroll to page Top in the Video Plugin to bring the display back into view. The limitation is the top of the embedded placeholder should be within the website viewing window to avoid a visitor having to scroll upwards to see the video window. This limitation is under review, but requires additional coding.

JS Video List Player Plugin

Native Video Plugin

This code is placed in the video plugin page HTML code (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); window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); document.getElementById('videocover').style.display = "none"; } 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 - this can be any location/ url such that if the string is placed between standard video tags it plays. The design uses Scale-to-fit-Width and was intentionally designed to work with a mobile variant using custom-built play and pause buttons. The Video Plugin placeholder has the following code: <video id="vidplayer" width="100%" height="100%" playsinline controls autoplay disablepictureinpicture controlsList="nodownload" style="display:none"; > </video> ‘videocover’ is the name given to either an image or group that covers the Video Plugin placeholder and its custom controls. The video cover sits above the placeholder and its controls - also see the Image Style description
The Video Plugin is published to the main website directory. In the main website, a placeholder is created, it should the SAME width as the the Video Plugin, but its height can be varied to show more or less from the video list. Where it is less in height a vertical scroll bar will correctly appear, subject to the height limitation described top right opposite. The code below is placed in the main website - Placeholder HTML (body): <iframe title = "JS Video Player" src="vplugin.htm" name="playlist" height="100%" width="100%" style="border:none;"></iframe> The filename “vplugin.htm” will the filename given to the Video Plugin and will be visible in the main website directory. The title and name for the iframe are the designer’s choice, as is the filename given to the Video Plugin.

JS Video List Player Plugin

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