The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Crop Youtube videos with CSS

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #199988

    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:
    Does anyone have a clue how to do this, this would be VERY much appreciated?

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.