I want to embed a youtube video on my site. The video have black anamorphic black bars up and bottom though the actual ratio is 16:9. (So the black bars where added in post).
Now – I’m looking of a way to crop only the top and bottom equally until all the black is hidden and the video is appearing as a anamorphic video.
I have tried for a couple of hours with css and divs. But unfotunally I have not succeeded yet. Having said that, I have finally cropped the top off, but the bottom black bar is still there.
I have wrapped the iframe with a div with the class “video-container” and this is the css so far:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: -10%;
left: 0;
width: 100%;
height: 100%;
}
A site with the video is here:
http://paternosterlighthouse.com/crop-youtube.html
Does anyone have a clue how to do this, this would be VERY much appreciated?
