LASERDISC-FULLSCREEN
Video Stretcher
WARNING: ALPHA RELEASE IN ACTIVE DEVELOPMENT. MOST OF THE FEATURES BELOW WORK, BUT SOME ARE STILL UNDER CONSTRUCTION. USE AT YOUR OWN RISK. BREAKING CHANGES WILL OCCUR UNTIL BETA RELEASE – WHICH WILL BE SOON
LASERDISC-FULLSCREEN is a super simple sub-module of LASERDISC who's sole purpose is to keep your video stretched to fill the screen. The video will maintain aspect ratio, so this will mean some croppage will occur depending on your screen dimensions.
The module allows you to pass in a parent container, which the video will crop to. If no container is passed in, the video will stretch to fill the window.
This is a standalone version of the module. If you are also using LASERDISC, this module will already be included and can be activated in standard options parameter.
Setting up LASERDISC-FULLSCREEN
npm install --save laserdisc-fullscreen
STYLING
The only caveat here, is that if you are placing the video inside any kind of wrapper or container, make sure you have position relative
set somewhere on the parent, as the video itself will be absolutely positioned. See CSS below
Example setup
HTML (Couple variations)
JS
//import module; //optionally pass in parent containersconst container1 = document;const container2 = document; //optional ratio parameter. Defaults to 16 / 9;const ratio = 16 / 9; //get actual video playersconst targetVideo = document;const targetIframe = document; //run the module, either calling direct, or instantiating new;const f = targetIframe container2 ratio; //Or only with required parameter, which will thereby default to window container and 16 / 9 crop ratio;const p = targetVideo;
CSS
Cool logo by Stephanie Davidson