I want to show only part of the video frame for a given video. Let me explain what I mean with examples:
I imagine setting properties like top
and left
to designate the start point for the video, then setting properties like bottom
and right
or height
and width
to designate how wide and high the video will will be shown from the start point.
I would very much prefer a CSS only solution. I doubt one exists however. I am okay with javascript/jquery. I have an idea based on the solution in this answer, but that seems a bit on the hack side of things. Basically, I could make a div the size that I want the video, relatively position it and set overflow to hidden. Then I would put the video element inside the div and absolutely position that so that the parts I want displayed are seen in the div, but the other parts overflow and are hidden. That does have the benefit of not needing javascript, but I would prefer to use real properties if they exists and no added HTML.
Here's some images to show what I want to accomplish, but do not know of any non-hack solution. The white part would be the size of the video frame and what is shown to the user. The gray part is what is hidden.
Video frame is 640 x 480 starting at the top left corner. The source is 852 x 480.
Video frame is 640 x 480 starting at the top right corner. The source is 852 x 480.
Video frame is 640 x 480 starting at top and 106 pixels from the left. The source is 852 x 480.
Video frame is 320 x 240 starting at 140 pixels from the top and 212 pixels from the left. The source is 852 x 480.
Style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery. To hide an element, set the style display property to “none”.
To hide a video on a web page, use yourVariableName. style. display='none'.
HTML allows playing video in the web browser by using <video> tag. To embed the video in the webpage, we use src element for mentioning the file address and width and height attributes are used to define its size.
Method 1: Using HTML: One can use the anchor tag to redirect to a particular section on the same page. You need to add ” id attribute” to the section you want to show and use the same id in href attribute with “#” in the anchor tag.
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 clipPath
s the id
s and use them in your CSS to clip the video(clip-path: url(#id)
).
<iframe id="clip-1" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>
<iframe id="clip-2" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>
<iframe id="clip-3" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>
<iframe id="clip-4" width="852" height="480" src="//www.youtube.com/embed/nGt_JGHYEO4" frameborder="0" allowfullscreen></iframe>
<svg>
<defs>
<!-- Co-ordinates for the first image in your question -->
<clipPath id="one">
<path d="M0,0 L640,0 L640,480 L0,480z" />
</clipPath>
<!-- Co-ordinates for the second image in your question -->
<clipPath id="two">
<path d="M212,0 L852,0 L852,480 L212,480z" />
</clipPath>
<!-- Co-ordinates for the third image in your question -->
<clipPath id="three">
<path d="M106,0 746,0 746,480 106,480z" />
</clipPath>
<!-- Co-ordinates for the fourth image in your question -->
<clipPath id="four">
<path d="M212,140 532,140 532,380 212,380z" />
</clipPath>
</defs>
</svg>
#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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With