How can I show only a section of a video frame with CSS or JavaScript?

Question

I want to show only part of the video frame for a given video. Let me explain what I mean with examples:

1. I have a wide screen video (852 x 480) but I want to d

Answer 1

You can use CSS's clip-path property to display the section of the video.

You'll need to define inline svg clipPath element, add a path element with co-ordinates, give the clipPaths the ids and use them in your CSS to clip the video(clip-path: url(#id)).

Fiddle

HTML:

CSS:

#clip-1 {
    position: absolute;
    -webkit-clip-path: url(#one);
    clip-path: url(#one);
}
#clip-2 {
    position: absolute;
    top: 480px;
    -webkit-clip-path: url(#two);
    clip-path: url(#two);
}
#clip-3 {
    position: absolute;
    top: 960px;
    -webkit-clip-path: url(#three);
    clip-path: url(#three);
}
#clip-4 {
    position: absolute;
    top: 1440px;
    -webkit-clip-path: url(#four);
    clip-path: url(#four);
}
body {
    margin: 0 auto;
}