To add an embedded video in HTML is as simple as add an image, but to make video responsive is a little bit tricky. When I try to make a full screen layout with video like below, it took my some effort to make it responsive. As my client request, this layout has below features:
- Support both raw HTML5
<iframe>video (Vimeo), which they can easily modify in CMS.
- All videos will be in a common aspect ratio
- Keep video height to fit the screen height in large screen, while keep video respect ratio in small screen.