How fitvids works
- Its wraps the video in a wrapper div with 100% width (no height setting)
- The wrapper div has a padding-top according to the aspect ratio ( height/width*100%). e.g. If height is half of width, it is 50%.
- The video element’s original height and width are removed and both are set to 100%.
- The video element is positioned in the wrapper div with css style position:absolute. This ensures that video element just fits in the padding of the parent wrapper div. Please note that had it been position:relative, the video element would have started after the padding.
For complete code here is github link.
In this example we display a video where fitvids.js has not been applied. You can resize the page and see what happens to the video. The video should not resize. Once you click on “apply fitvids code”, the following code is executed.
Now video should resize with resize of the page.