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.
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.
Plugin Placeholder
Depending on the length of the page that the plug-in has been embedded the design may call for the placeholder to be made sticky to ensure the video is always in view, such that when a selection is made, the visitor does not have to scroll up or down to find the video playing
Video Plugins and Management
Video Library Project
JS Video List Player
