Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #20406

    Hi there,

    I have a problem with the responsiveness of vimeo embeded videos.

    It’s easy to embed the videos via iframe and for normal screens it works well.

    But when I change the screen resolution e.g. while viewing on my iPhone the embeded vimeo videos get an ugly letterbox. (Black bars at the top and the bottom.)

    I tried several other methods to embed the vids. But nothings seems to work.

    For reference:

    Would appreciate if somebody is able to help me. :)

    Best regards from Germany



    Found a solution on the web:

    1. Embed the video using:

    <div class=”video”>

    <iframe src=”″ width=”720″ height=”405″ frameborder=”0″ webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>


    2. Add adjustment to the grid.css:

    @media only screen and (max-width: 767px) {


    .video embed, .video object, .video iframe {width: 300px; height: 166px;}



    @media only screen and (min-width: 480px) and (max-width: 767px) {


    .video embed, .video object, .video iframe {width: 420px; height: 231px;}


    Works fine. :)

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘responsive | vimeo embed | letterbox issue’ is closed to new replies.