Liquid video
I would like to share with you an easy script that I published the other day. Liquid video does exactly what the name suggests. It converts fixed sized iframe videos (from YouTube, Vimeo and other services like that) to responsive ones that adapt to the width of the parent container. It does exactly the same job as popular FitVids but doesn’t rely on additional jQuery dependency. It is extremely lightweight - only 417 Bytes minified and 998 Bytes unminified.
How to use Liquid video
You have two options to use Liquid video. You can manually inject script to source code of your project (sounds a bit old school) or via npm (preferred way).
Manual method
Simply inject a minified script in source code of your website and instantiate a new LiqudVideo with custom element query as an only argument. Use it just before closing of body tag.
<script src="js/liquid-video.min.js"></script>
<script>
var lv = new LiquidVideo(document.querySelectorAll('.post iframe'));
</script>
Use with npm
In age of module bundlers like Browserify or Webpack using external scripts with npm makes life much easier. Just type in your command line…
npm install --save liquid-video
Personally I prefer to use shortcuts…
npm i -S liquid-video
And this one goes to your JavaScript file.
var LiquidVideo = require('liquid-video');
var lv = new LiquidVideo(document.querySelectorAll('.post iframe'));
See the Pen Liquid video by Pawel Grzybek (@pawelgrzybek) on CodePen.